CSS3 属性选择器、结构伪类选择器、伪元素选择器详细讲解

属性选择器

• 属性选择器可以根据元素特定属性来选择元素。

选择符	说明
E[att]	选择具有att属性的E元素
E[att=“val”]	选择具有att属性且属性值等于val的E元素
E[att^=“val”]	匹配具有att属性且属性值以val开头的E元素
E[att$=“val”]	匹配具有att属性且属性值以val结尾的E元素
E[att*=“val”]	匹配具有att属性且属性值中含有val的E元素

• 类选择器、伪类选择器和属性选择器的权重都为10。

结构伪类选择器

• 结构伪类选择器主要根据文档结构来选择元素，常用于选择父级选择器里面的子元素。

选择符	说明
E:first-child	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中的最后一个子元素E
E:nth-child(n)	匹配父元素中的第n个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

• 注意点：nth-child(n)中的n可以有多种类型，具体包括以下几种：

1. 数字。n如果是数字，就是选择第n个子元素，数字从1开始。
2. 关键字。n可以是even（偶数）和odd（奇数）关键字。
3. 公式。常见的公式如下表所示：(其中n是从0开始计算的，并且第0个元素和超出元素个数的元素都会被忽略)

公式	取值
n	选择所有
2n	偶数
2n+1	奇数
5n	5 10 15 20…
n+5	从第5个开始到最后一个（包含第5个）
-n+5	前5个（包含第5个）

• nth-child(n)和nth-of-type(n)的区别：

1. nth-child(n)会对父元素里面的所有孩子进行排序，先找到第n个孩子，然后看该孩子的标签名是否和E匹配
2. nth-of-type(n)会对父元素里面指定的子元素进行排序，先匹配E，然后再根据E找到第n个孩子

• 结构伪类选择器的权重也为10。

伪元素选择器

• 伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。

选择符	说明
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

• 注意点：

1. before和after常见的元素都是行内元素
2. 新创建的元素在文档树中是找不到的
3. before和after必须有content属性
4. 伪元素选择器和标签选择器一样，权重都为1

---

微信公众号也会定期更新，觉得文章写得还可以的，可以加个关注！点个赞！谢谢！