CSS3 新增选择器_新增前选择-CSDN博客

本文链接：https://blog.csdn.net/yen_zz/article/details/123884111

CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。主要包括结构伪类选择器和伪元素选择器。

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

1.1 E:first-child
E:first-child 这个选择器用于匹配父元素中的第一个子元素E

/* 1.表示选择ul里面的第一个孩子，若第一个孩子是li元素，那么背景色就会变成粉色，
但是如果ul的第一个孩子不是li元素，那么就不会执行该样式*/
ul li:first-child {
background-color: pink;
}
1.2 E:last-child
E:last-child 这个选择器用于匹配父元素中的最后一个子元素E

/* 2.选择ul里面的最后一个孩子，若最后一个孩子是li元素，那么背景色就会变成天蓝色，
但是如果ul的最后一个孩子不是li元素，那么就不会执行该样式*/ */
ul li:last-child{
background-color: skyblue;
}
1.3 E:nth-child(n)
E:nth-child 这个选择器用于匹配某个父元素的一个或多个特定的子元素

/* 3.选择ul里面的第5个孩子。若第五个孩子是li元素，那么背景色就会变成紫色，
但是如果ul的第五个孩子不是li元素，那么就不会执行该样式*/ */
ul li:nth-child(5) {
background-color: purple;
}
注意点：
nth-child（n）
①n 可以是数字，关键字和公式
②n 如果是数字，就是选择第 n 个子元素，里面数字从1开始…
③n 可以是关键字：even 偶数，odd 奇数
④n 可以是公式：常见的公式如下 ( 如果n是公式，则从0开始计算，但是第 0 个元素或者超出了元素的个数会被忽略 )

常用公式如下：

1.4 E:first-of-type
E:first-of-type 这个选择器用于指定类型为E 的第一个

/* 4.表示选择ul里面的第一个li，就是把ul里面的所有li进行排列，然后把第一个li找出来 */
ul li:first-of-type {
background-color: pink;
}
1.5 E:last-of-type
/* 5.表示选择ul里面的最后一个li，就是把ul里面的所有li进行排列，然后把最后一个li找出来 */
ul li:first-of-type {
background-color: skyblue;
}
1.6 E:nth-of-type(n)
/* 6.表示选择ul里面的第n个li，就是把ul里面的所有li进行排列，然后把第n个li找出来 */
ul li:nth-of-type(n) {
background-color: blue;
}
1.7 E:nth-child(n) 和 E:nth-of-type(n)的对比
1.nth-child 会把所有的盒子(孩子)都排列序号，即执行的时候首先看 :nth-child(n) 之后回去看前面的E。

其通俗的讲，就是先找出第n个孩子，然后再去匹配这个孩子是否是E元素，如果是E元素，那么就会执行样式，否则不执行。

2.nth-of-type会把指定元素的盒子(孩子)进行排列序号，即执行的时候首先看指定的元素E，之后回去看:nth-child(n) 第几个孩子。

其通俗的讲，就是先只把父元素里面的E元素进行排列，然后在这些E元素中把第n个找出。

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

2.1 ::before
p::before {
content: "前面插入的内容";
color: red;
}
<body>
我表示段落
我表示段落
我表示段落
我表示段落
</body>
上面这个代码执行后的效果为：

虽然HTML结构里并没有“前面插入的内容”，但是因为利用css的伪类选择器::before，从而将“前面插入的内容”这段文字插在了p元素前面。

2.2 ::after
p::after {
content:"后面插入的内容";
color: purple;
}
<body>
我表示段落
我表示段落
我表示段落
我表示段落
</body>
上面这个代码执行后的效果为：

虽然HTML结构里并没有“后面插入的内容”，但是因为利用css的伪类选择器::after，从而将“后面插入的内容”这段文字插在了p元素后面。

2.3 注意点
①before 和 after 创建一个元素，但是属于行内元素
②新创建的这个元素在文档html中是找不到的，所以我们称为伪元素
③before 和 after 必须有 content 属性
④before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
⑤伪元素选择器和标签选择器一样，权重为 1