结构伪类选择器-CSS3新特性
CSS3新特性-结构伪类选择器
- 在CSS3中新增了一个结构伪类选择器，它能用更加简洁的代码，实现我们的某些需求。
- 定义：结构伪类选择器主要根据的是文档的结构来选择元素，常常用在根据父级选择器选出某些想要的子元素。
- 主要语法如下：
编号 | 语法 | 含义 |
|---|---|---|
1 | E:first-child | 匹配父元素中的第一个子元素E |
2 | E:last-child | 匹配父元素中最后一个E元素 |
3 | E:nth-child(n) | 匹配父元素中的第n个子元素E |
4 | E:first-of-type | 指定类型E的第一个 |
5 | E:last-of-type | 指定类型E的最后一个 |
6 | E:nth-of-type(n) | 指定类型E的第n个 |
公式 | 选取范围 |
|---|---|
n | 所有子元素 |
2n | 偶数子元素 |
2n+1 | 奇数子元素 |
5n | 第5、10、15...个子元素 |
n+3 | 从第3个子元素开始（包括第3个）到最后 |
-n+6 | 前6个子元素(注意不能写成 6-n 不生效) |
其中：n可以是数字，关键字和公式。
1. n如果是数字，就是选择第n个子元素，里面数字从1开始...
2. n如果是关键字: even代表偶数，odd代表奇数
3. n可以是公式︰常见的公式如下：
4. 注意：如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略一、E:first-child
- 含义：匹配父元素中的第一个子元素E。
- 示例：如下代码会选中ul下的第一个li。
<style>
ul li:first-child {
background-color: green;
}
</style>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
</ul>效果：
二、E:last-child
- 含义：匹配父元素中最后一个E元素。
- 示例：如下代码会选中ul下的最后一个li。
<style>
ul li:last-child {
background-color: green;
}
</style>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
</ul>
效果：
三、E:nth-child(n)
- 含义：匹配父元素中最后一个E元素。
- 示例：如下代码会选中ul下的最后一个li。
<style>
ul li:nth-child(n) {
background-color: green;
}
</style>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
</ul>
示例2：如下代码会选中ul下的偶数子元素。
<style>
ul li:nth-child(2n) {
background-color: green;
}
</style>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
</ul>
示例3：如下代码会选中ul下的奇数子元素。
<style>
ul li:nth-child(2n+1) {
background-color: green;
}
</style>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
</ul>
示例4：如下代码会选中ul下5、10、15…的子元素。
<style>
ul li:nth-child(5n) {
background-color: green;
}
</style>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
<li>我是第6个li</li>
<li>我是第7个li</li>
<li>我是第8个li</li>
<li>我是第9个li</li>
<li>我是第10个li</li>
<li>我是第11个li</li>
<li>我是第12个li</li>
<li>我是第13个li</li>
<li>我是第14个li</li>
<li>我是第15个li</li>
<li>我是第16个li</li>
<li>我是第17个li</li>
<li>我是第18个li</li>
<li>我是第19个li</li>
<li>我是第20个li</li>
</ul>
在这里插入图片描述
示例5：如下代码会选中ul下的第3个子元素到最后。
<style>
ul li:nth-child(n+3) {
background-color: green;
}
</style>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
<li>我是第6个li</li>
<li>我是第7个li</li>
<li>我是第8个li</li>
<li>我是第9个li</li>
<li>我是第10个li</li>
</ul>
在这里插入图片描述
示例6：如下代码会选中ul下的前6个子元素(注意：一定不能写成n-6)。
<style>
ul li:nth-child(-n+6) {
background-color: green;
}
</style>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
<li>我是第6个li</li>
<li>我是第7个li</li>
<li>我是第8个li</li>
<li>我是第9个li</li>
<li>我是第10个li</li>
</ul>
在这里插入图片描述
四、E:first-of-type
- 含义：指定类型E的第一个。
- 示例：如下代码会选中ul标签下的第一个li标签。
<style>
ul li:first-of-type {
background-color: green;
}
</style>
<ul>
<p>我是第1个p标签</p>
<p>我是第2个p标签</p>
<a href="#">我是第1个a标签</a>
<a href="#">我是第2个a标签</a>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
</ul>
在这里插入图片描述
五、E:last-of-type
- 含义：指定类型E的最后一个。
- 示例：如下代码会选中ul标签下的第一个li标签。
<style>
ul a:last-of-type {
background-color: green;
}
</style>
<ul>
<p>我是第1个p标签</p>
<p>我是第2个p标签</p>
<a href="#">我是第1个a标签</a>
<a href="#">我是第2个a标签</a>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
</ul>
在这里插入图片描述
六、E:nth-of-type(n)
- 含义：指定类型E的第n个。
- 用法：nth-of-type(n)的用法和nth-child(n)的用法类似，只不过nth-of-type(n)会在指定类型的条件下选择子元素，其中n的取值和nth-child(n)中n的取值用法一模一样。
示例1 ： 如下代码会选中ul下第2个li标签。
<style>
ul li:nth-of-type(2) {
background-color: green;
}
</style>
<ul>
<p>我是第1个p标签</p>
<p>我是第2个p标签</p>
<a href="#">我是第1个a标签</a>
<a href="">我是第2个a标签</a>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
</ul>
在这里插入图片描述
注意：如下写法是错误的！！！
想选择ul下的第一个li元素：
ul li:first-child { background-color: green; } 这种写法什么都不会选出来，因为ul标签下的第一个子元素是p,不是li,所以不会有元素被选出来。逻辑来说的话就是：它会先找到ul下的第一个子元素，然后去和li比较，发现标签类型不符合，所以就不会选择
ul li:first-of-type {
background-color: green;
}
这种写法会将第一个li选出来，从逻辑上来说：它会先找到ul下面的li元素然后再去找第一个元素
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021/02/17 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
