结构伪类选择器说明
结构伪类选择器主要根据文档结构来选择元素,常用于根据父级选择里面的子元素。
E:first-child
:匹配父元素中的第一个子元素E。E:last-child
:匹配父元素中的最后一个子元素E。E:nth-child(n)
:匹配父元素中的第n个子元素E。E:first-of-type
:指定类型E的第一个。E:nth-of-type(n)
:指定类型E的第n个。
nth-child(n)选择某个父元素的一个或多个特定的子元素:
- n可以是数字、关键字、或公式。
- 如果n是数字,就是选择第 n 个子元素,里面数字从1开始。
- n可以是关键字:even 偶数,odd 奇数。
- n可以是公式:常见的公式如下(如果n是公式,则从0开始计算,但是第0个元素或者超出了元素的个数会被忽略)。
公式 | 数值 |
---|---|
2n | 偶数 |
2n+1 | 奇数 |
5n | 5 10 15 … |
n+5 | 从第5个开始(包括第5个)到最后 |
-n+5 | 前5个(包括第5个) |
示例
first-child:选择第父级下面的第1个子元素
last-child:选择第父级下面的最后1个子元素
nth-child(2):选择第2个字元素
nth-child(even)和nth-child(odd):分别选择所有偶数的子元素、奇数的子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 把所有的偶数的孩子选出来 */
ul li:nth-child(even) {
background-color: #ccc;
}
/* 把所有的奇数的孩子选出来 */
ul li:nth-child(odd) {
background-color: green;
}
</style>
</head>
<body>
<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>
</ul>
</body>
</html>