CSS3新增结构伪类选择器-nth-child
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3新增结构伪类选择器-nth-child</title>
<style>
/* 1.把所有 偶数的孩子选出来，也就是隔行变色 */
ul li:nth-child(even) {
background-color: red;
}
/* 2.把所有 奇数的孩子选出来 */
ul li:nth-child(odd) {
background-color: gray;
}
/* 3. :nth-child(n) 从0开始 每次加1 往后面计算 这里面必须是n，不能是其他字母 相当于选择了所有的孩子
ol li:nth-child(n) {
background-color: pink;
} */
/* 4. :nth-child(2n) 相当于选择了所有的偶数孩子*/
/* ol li:nth-child(2n) {
background-color: pink;
} */
/* 5. :nth-child(2n+1) 相当于选择了所有的奇数孩子*/
/* ol li:nth-child(2n+1) {
background-color: palegreen;
} */
/* 5.从第三个开始 */
/* ol li:nth-child(n+3) {
background-color: paleturquoise;
} */
/* 6.选择前五个 */
ol li:nth-child(-n+5) {
background-color: yellowgreen;
}
</style>
</head>
<body>
<ul>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
<li>我是第6个孩子</li>
<li>我是第7个孩子</li>
<li>我是第8个孩子</li>
</ul>
<ol>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
<li>我是第6个孩子</li>
<li>我是第7个孩子</li>
<li>我是第8个孩子</li>
</ol>
</body>
</html>
效果展示
