2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > 属性选择器 结构伪类选择器 伪元素选择器

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

时间:2022-10-18 03:38:13

相关推荐

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

选择器

一、属性选择器

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]:这就是关于这三个选择器的相关内容,希望对你有所帮助,最后还是希望我们一起努力加油吧!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。