编号 | 语法 | 含义 |
---|---|---|
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个元素或者超出了元素的个数会被忽略
<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>
效果:
<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>
效果:
<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>
<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>
<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>
示例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元素然后再去找第一个元素