CSS3 新增选择器

最新推荐文章于 2023-10-14 20:18:49 发布

JJ_Smilewang

最新推荐文章于 2023-10-14 20:18:49 发布

阅读量1.4k

点赞数 3

分类专栏： html5和CSS3基础文章标签： css3 html5 前端

本文链接：https://blog.csdn.net/JJ_Smilewang/article/details/123875617

版权

html5和CSS3基础专栏收录该内容

16 篇文章 2 订阅

订阅专栏

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>
    <p>我表示段落</p>
    <p>我表示段落</p>
    <p>我表示段落</p>
    <p>我表示段落</p>
</body>

上面这个代码执行后的效果为：

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

2.2 ::after

p::after {
    content:"后面插入的内容";
    color: purple;
}

<body>
    <p>我表示段落</p>
    <p>我表示段落</p>
    <p>我表示段落</p>
    <p>我表示段落</p>
</body>

上面这个代码执行后的效果为：

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

2.3 注意点

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

JJ_Smilewang

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
CSS3 新增选择器

CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。主要包括结构伪类选择器和伪元素选择器。1. 结构伪类选择器结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素。1.1 E:first-childE:first-child 这个选择器用于匹配父元素中的第一个子元素E/* 1.表示选择ul里面的第一个孩子，若第一个孩子是li元素，那么背景色就会变成粉色，但是如果ul的第一个孩子不是li元素，那么就不会执行该样式*/ ul li:f
复制链接

扫一扫