选择器
一、属性选择器
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]:这就是关于这三个选择器的相关内容,希望对你有所帮助,最后还是希望我们一起努力加油吧!
如果觉得《属性选择器 结构伪类选择器 伪元素选择器》对你有帮助,请点赞、收藏,并留下你的观点哦!