nth-child() 三个常用小技巧:
1. 奇偶数选中
2. 选择前几个元素
3. 选中后几个元素
1. 奇偶数选中
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS结构伪类选择器(nth-child的几个使用小技巧)</title>
<style>
ul {
margin: 0;
padding: 0;
list-style: none;
width: 600px;
}
ul li:nth-child(odd) {
padding: 10px;
background-color: #e9f2f7;
}
ul li:nth-child(even) {
padding: 10px;
background-color: #f8f8f8;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
运行:
解释:
通过nth-child()的固定参数来选择奇偶 : 传入odd选择奇数, 传入even选择偶数。
2. 选中前几个元素
代码:
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS结构伪类选择器(nth-child的几个使用小技巧)</title>
<style>
ul {
margin: 0;
padding: 0;
list-style: none;
width: 600px;
}
ul li {
padding: 10px;
background-color: skyblue;
}
ul li:nth-child(-n+2) {
background-color: greenyellow;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
运行:
解释:
nth-child()可以传入一个固定参数 n, n从0开始, 依次累加子元素个数次。 案例中<ul>下共有6个<li>子元素, 那么n依次为,0 1 2 3 4 5
选中前几个元素得算法就是, (-n + 想选中的个数)
案例中,选中前两个就是 (-n + 2),推导出来就是:
( 0 + 2) = 2
( -1 + 2) = 1
( -2 + 2) = 0
( -3 + 2) = -1
( -4 + 2) = -2
( -5 + 2) = -3
nth-child()选择元素时, 子元素会被标记序号, 标记序号是从1开始的,6个<li>的序号分别是, 1 2 3 4 5 6, 结合上面的推导,(-n + 2)算出来的只有1和2是有效序号, 其他的都不存在, 所以1和2会被选中,从而实现目标效果。
3. 选中后几个元素
代码:
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS结构伪类选择器(nth-child的几个使用小技巧)</title>
<style>
ul {
margin: 0;
padding: 0;
list-style: none;
width: 600px;
}
ul li {
padding: 10px;
background-color: skyblue;
}
ul li:nth-child(n+5) {
background-color: greenyellow;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
运行:
解释:
nth-child()可以传入一个固定参数 n, n从0开始, 依次累加子元素个数次。 案例中<ul>下共有6个<li>子元素, 那么n依次为,0 1 2 3 4 5
选中前几个元素得算法就是, (n + 想选中的起始位置)
案例中,选中后两个就是 (n + 5),推导出来就是:
( 0 + 5) = 5
( 1 + 5) = 6
( 2 + 5) = 7
( 3 + 5) = 8
( 4 + 5) = 9
( 5 + 5) = 10
nth-child()选择元素时, 子元素会被标记序号, 标记序号是从1开始的,6个<li>的序号分别是, 1 2 3 4 5 6, 结合上面的推导,(n + 5)算出来的只有5和6是有效序号, 其他的都不存在, 所以5和6会被选中,从而实现目标效果。