属性选择器、结构伪类选择器、伪元素选择器

选择器

一、属性选择器

1、E[att]
作用为：选择具有att属性的E元素。
2、E[att= “val”]
作用为：选择具有att属性，且属性值等于val的E元素；属性等于值。
3、E[att^=“val”]
作用为：匹配具有att属性，且值以val开头的E元素；以某个值开头的属性值。
4、E[att$= “val”]
作用为：匹配具有att属性，且值以val结尾的E元素；以某个值结尾
5、E[att*= “val”]
匹配具有att属性，且值中含有val的元素；
可以在任意位置。
注意：它的权重为10。

二、结构伪类选择器

1、E:first-child
作用为：匹配父元素中的第一个子元素E。
2、E:last-child
作用为：匹配父元素中最后一个E元素。
3、E:nth-child(n)
作用为：匹配父元素中的第n个子元素E。
注意：
（1）、n可以是数字、关键字和公式。
（2）、n如果是数字，就是选择第几个。
（3）、常见的关键词有even偶数 odd奇数。
（4）、常见的公式如下(如果n是公式，则从0开始计算)。
（5）、但是第0个元素或者超出了元素的个数会被忽略。
（6）、ul里面我们只允许放li，所以nth-shlid和nth-of-type就一样了。
扒了个图…公式如下：

4、E:first-of-type
作用为：指定类型E的第一个。
5、E:last-of-type
作用为指定类型E的最后一个。
6、E:nth-of-type(n)
作用为：指定类型E的第n个。
注意：结构伪类选择器的权重为10。

三、伪元素选择器

1、::before
作用为：在元素内部的前面插入内容
2、::after
作用为：在元素内部的后面插入内容
注意：
1、before 和after必须有content属性。
2、before在内容的前面，after在内容的后面。
3、before和after创建一个元愫 ，但是属于行元素。
4、因为在dom里面看不见刚才创建的元素，所以我们称为伪元素。
5、伪元素和标签选择器一样，权重为1。
举个例子：

效果图：

[^1]：这就是关于这三个选择器的相关内容，希望对你有所帮助，最后还是希望我们一起努力加油吧！