CSS笔记——伪类和伪元素

1、伪类

伪类是用于为元素在某些特定状态下添加样式的选择器。它们可以让我们为用户与页面交互时元素的外观和行为进行样式定义。

常用的伪类有:

• :hover ，鼠标悬停

• :active

• :focus ，表单聚焦

• :blur ,失去表单聚焦

• :link ，未访问

• :visited ，已访问

• :checked ,被选中（用在单复选框），状态切换做开关

• focus-within ，一个元素获得焦点，该元素的后代都获得焦点，都可触发事件

  案例：掘金登录 （唯一子元素影响父元素的选择器）

例如，我们可以为鼠标悬停在一个链接上时的状态添加样式：

a:hover {
  text-decoration: underline;
  color: blue;
}

n的取值：2n+1 、 n（odd) 、2n (even) 、2n-1

其他伪类（结构类）

• nth-child(n) ,选中该伪类元素列表的n个兄弟节点（优先序号，再看类型）
• nth-last-child(n) ,和上一个相反
• nth-of-type(n) ,优先类型，再看序号
• nth-last-of-type(n)
• first-child(n)/last-child(n)
• first-of-typen)/last-of-type(n)
• :not() ,反选

其他伪类（属性类）

• div[attr=“val”] ,选中对应属性值的div
• div[attr~=“val”] ,选中对应属性包含val的div
• div[attr^=“val”] ,选中对应属性以val开头的div
• div[attr$=“val”] ,选中对应属性以val结尾的div
• filter:blur(3px) 模糊

2、伪元素

伪元素允许我们在元素的内容之前或之后添加一些特殊的样式，而不需要添加额外的HTML标记。伪元素可以用来添加装饰性的文本、图标等。

常用的伪元素有

• ::before ，在前面创建伪元素

• ::after ，在后面创建伪元素

• ::first-letter ，首行首字（只能用于块元素）

• ::first-line ，首行文本

• ::selection ，被选中的文本样式修改

  伪元素激活：content取值

  1. url() ,指定资源
  2. " " ,
  3. none
  4. normal
  5. 文本

例如，我们可以使用::before伪元素来为一个元素前面添加一些内容：

h1::before {
  content: "标题：";
  font-weight: bold;
}

需要注意的是，在CSS2中，伪元素使用单冒号（:）作为前缀，而在CSS3中，它们使用双冒号（::）作为前缀。同时，在使用伪元素时，必须要设置content属性，否则伪元素的样式不会生效。

注：

• 伪元素无法通过其他选择器选中
• 伪元素不会被搜索引擎收录，不影响网页SEO

伪元素应用：

• 作为不能选中的元素（user-select:none；让元素无法选中）
• 清除浮动的高度塌陷
• 设置字体图标

3、伪元素和伪类的区别

• 伪元素是无中生有的，用"::",不包含在文档树
• 伪类是表示某种状态，用":", 用于操作文档树中的元素