• 2024-10-20【前端横向导航栏及简单动画效果(伪类选择器)】
    【html代码】 <!DOCTYPEhtml><html> <head> <metacharset="utf-8"/> <title></title> <linkrel="stylesheet"type="text/css"href="./css/index.css"/> </head> &l
  • 2024-10-11[CSS] 伪元素和伪类,::before 和 :before 区别
     标签:CSS特点伪类伪元素用途选择元素的状态或基于结构选择元素创建虚拟的内容,操作元素的某些部分语法使用单个冒号(
  • 2024-10-11CSS篇二:其他选择器与权重/范围
    一、其他选择器简单聊聊:篇一提到的三种基础选择器其实并不能完全覆盖商业项目的开发场景,所以其他类型选择器的使用频率也非常高,所以还是建议记住,避免某一场景下为难。1、通配选择器简述:使用较少,优缺点都很明显,优→统一设置;缺→样式覆盖,降低代码执行效率。推荐度:一星2、组
  • 2024-10-08前端学习-CSS的复合选择器(十四)
    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档目录前言什么是复合选择器后代选择器语法格式注意事项代码示例子选择器语法格式注意事项代码示例并集选择器语法格式伪类选择器链接伪类选择器​编辑注意事项:focus伪类选择器表格总结总结
  • 2024-10-07css选择器用法
    1.元素选择器(标签选择器)元素名称{} 2类选择器以点开头{}3.id选择器器以#号开头4.后代选择器空格分隔5.子类选择器>大于号分隔6.相邻兄弟选择器+连接选择与指定元素在同一层级且紧接在它后面的元素(只有一个)。h2+
  • 2024-09-28css伪类元素初识
    昨天想写一个登陆网站,但是怎么都实现不了图片里+表单,搜索发现需要css的伪类元素帮助,特意学习常见的伪类元素在CSS中,:before和:after是伪元素,它们可以用于在指定元素的内容之前或之后插入内容。这两个伪元素非常强大,常用于装饰性元素或者清除浮动等。关于:before和:after的一
  • 2024-09-25伪类选择器:动态伪类、结构伪类、否定伪类、UI伪类、目标伪类、语言伪类
    什么是伪类:很像类,但不是类,是元素特殊状态的一种描述。作用:选中特殊状态的元素1.动态伪类什么是动态伪类:因为它的变化是动态的,拿a:hover举例,一会悬浮一会不悬浮,是动态变化的。拿a标签举例:a:link 代表没有访问过的超链接      a:visited 代表访问过的超链接
  • 2024-09-24万象更新 Html5 - css: selector 选择器: 伪类(pseudo class)
    源码https://github.com/webabcd/Html5作者webabcd万象更新Html5-css:selector选择器:伪类(pseudoclass)示例如下:css\src\selector\demo4.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><ti
  • 2024-09-12[CSS] 伪元素和伪类,::before 和 :before 区别
    特点伪类伪元素用途选择元素的状态或基于结构选择元素创建虚拟的内容,操作元素的某些部分语法使用单个冒号(
  • 2024-09-12CSS样式
    下列笔记均是来自尚硅谷张天禹的上课内容。1样式写的位置1.1行内(不推荐) 1.2内部1.3外部 1.4优先级 2css语法规范3选择器3.1 通配选择器常用于清除q样式3.2元素选择器 3.3类选择器  3.4id选择器3.5总结 3.6交集选择器3.7并集
  • 2024-09-05伪类和伪元素
    伪类选择器就是我们常用的:hover、:link、:focus、:nth-child(n)等伪元素一般使用两个引号::before、::after、::first-line。伪类和伪元素的区别伪类的操作对象是文档数中已有的元素,而伪元素则是创建了一个文档树外的元素。有没有创建一个文档树外的元素是一个重要区别(不过
  • 2024-08-31Css 伪类/伪类对象使用整理_使用案例
    一、Css伪类/伪类对象介绍Css伪类整理_Css伪类对象整理_Css伪类伪类对象使用CSSPseudo-ElementSelectors伪对象选择符 二、Css伪类/伪类对象使用案例 1.Css3伪元素::before和::after 2.Css伪元素控制进度条_Css控制滚动条_Css::-webkit-scrollbar整理 
  • 2024-08-18CSS的:last-of-type伪类:精准定位末尾元素的样式秘诀
    在CSS中,伪类是一种强大的工具,它允许我们根据文档的上下文关系选择元素,而不仅仅是它们的类型或类名。:last-of-type伪类是这些工具中的一个,它可以用来选择一个父元素中最后一种特定类型的子元素。这种能力在设计复杂的布局时非常有用,比如在列表、表格或嵌套元素中添加特定的
  • 2024-08-18CSS的:indeterminate伪类:精妙控制不确定状态的样式
    CSS的:indeterminate伪类是一个强大但较少为人所知的工具,它允许开发者选择那些处于不确定状态的元素,如未选中但也不完全未勾选的复选框(checkbox)。这种状态在某些表单元素中非常有用,比如在表示部分选中的选项或不确定的设置时。本文将详细介绍:indeterminate伪类的使用,以及如
  • 2024-08-17深入探索CSS的:local-link伪类:选择指向同一文档的链接
    CSS(层叠样式表)是控制网页样式的核心语言,它允许开发者根据元素的不同状态和特性来应用样式。:local-link伪类是CSS中一个相对较少被讨论的选择器,它专门用于选择那些指向同一文档内锚点的链接。本文将详细介绍:local-link伪类的使用方式、应用场景以及如何通过它们增强网页的
  • 2024-08-17CSS的:defined伪类:选择已定义元素的新选择器
    CSS(层叠样式表)是控制网页样式的核心语言,随着CSS4的提出,一系列新的选择器被引入,其中:defined伪类便是这些新特性之一。:defined伪类允许开发者选择HTML文档中已经定义的元素,这在处理自定义元素(如WebComponents)时非常有用。本文将详细介绍:defined伪类的使用方式、应用场景以
  • 2024-08-17探索CSS的未来与过去::past-link伪类的创新应用
    CSS(层叠样式表)是构建网页视觉表现的核心技术。随着CSS4的提出,一系列新的选择器被引入,旨在提供更丰富的样式控制能力。:past-link伪类是这些新提议中的一个,尽管它目前还未被广泛实现,但它代表了CSS选择器未来发展的一个方向。本文将探讨:past-link伪类的概念、潜在的实现方式
  • 2024-08-17CSS表单元素选择器::optional和:required伪类的深度应用
    CSS(层叠样式表)是控制网页样式的强大工具,它允许开发者根据元素的不同状态和特性来应用样式。在HTML表单中,:optional和:required伪类是两个非常有用的工具,它们允许开发者针对用户输入是否为可选或必填来设置样式。本文将详细介绍这两个伪类的使用方式、应用场景以及如何通过它
  • 2024-08-08CSS——选择器
    一、常用选择器   1、元素选择器:根据标签名选中指定元素。                             语法:标签名{}                             例子:p{}    h1{}   div{}    2、id选择器:根据元素的
  • 2024-08-05CSS学习:继承、权重关系、伪类选择器、媒体查询
    1、具有继承性质的样式(可以被子元素继承)color文字颜色 ;font-family字体族;font-size字体大小; font-weight字体粗细;line-height行高;text-align文本对齐方式;visibility可见性;cursor鼠标指针样式。2、不具有继承性质的样式(不能被子元素继承)background-color背景颜色;border
  • 2024-07-19前端必修技能:高手进阶核心知识分享 - CSS伪类和伪元素
    前端必修技能:高手进阶核心知识分享-CSS伪类和伪元素前端必修技能:高手进阶核心知识分享-CSS伪类和伪元素在前端的工作中,经常会遇到伪类和伪元素,但很多人(包括我自己)都没有仔细的去分辨它们,归其原因,大概是因为:写法相似。但其实,伪类和伪元素还是有很多不同的。温
  • 2024-07-18CSS中的伪类
    CSS中的伪类引言CSS(CascadingStyleSheets,层叠样式表)是Web开发中不可或缺的一部分。它用于控制网页的外观和布局,使得网页不仅功能强大,还具有吸引力。在CSS中,伪类(Pseudo-classes)是一种强大的工具,能够选择和样式化那些在普通选择器无法触及的元素状态或特性。本文将深入探讨CSS中
  • 2024-07-171px问题
    1、伪类+transform基于media查询判断不同的设备像素比对线条进行缩放。这种方式可以满足各种场景,如果需要满足圆角,只需要给伪类也加上border-radius即可。.border_1px:before{content:'';position:absolute;top:0;he
  • 2024-07-12CSS基础
    CSS基础CSS的使用盒子模型CSS选择器基本选择器伪元素选择器伪类选择器1.结构性伪类选择器2.UI状态伪类选择器3.其他伪类选择器CSS选择器优先级弹性盒子模型定位CSS长度单位1.绝对长度单位2.相对长度单位CSS的使用<!--行内样式在元素内部style=“”-->