CSS :nth-child() 伪类根据元素在其父元素的子元素中的位置来选择元素。:nth-child() 伪类接受一个参数，该参数可以是数字、关键字或数学表达式。
语法
:nth-child(<nth> [of <complex-selector-list>]?) {
/* ... */
}
CSS 使用 :nth-child() 伪类时，子元素计数包括任何元素类型的所有同级子元素，但只会选择与选择器的其他组件匹配的元素。
可能的值
- 奇数 - 此值选择所有奇数的子元素，例如 1,3,5..等。
- 偶数 − 此值选择所有偶数子元素，例如 2、4、6 等。
- 函数表示法 （<an+b>） − 此值从其父容器中选择每个 an+b 子元素，其中“a”是正整数，“n”是从 0 开始的计数器变量。“b”是另一个正整数。
下表描述了 CSS 选择器的列表及其说明：
| 选择器 | 描述 |
|---|---|
| tr:nth-child(odd) or tr:nth-last-child(2n+1) | HTML 表中的所有奇数行。 |
| tr:nth-child(even) or tr:nth-last-child(2n) | HTML 表中的所有偶数行。 |
| :nth-child(7) | 选择第七个元素。 |
| :nth-child(5n) | 选择 5 的倍数元素，例如第 5 个、第 10 个、第 15 个等。 |
| :nth-child(n+6) | 选择从第六个元素开始的所有元素。 |
| :nth-child(3n+4) | 选择 3 加 4 的倍数元素，例如第 4 个、第 7 个、第 10 个、第 13 个等。 |
| :nth-child(-n+3) | 选择前三个元素。 |
| p:nth-child(n) | 选择同级组中的所有 <p> 元素。 |
| p:nth-child(1) or p:nth-child(0n+1) | 选择属于其父元素的第一个子元素的所有 <p> 元素。 |
| p:nth-child(n+8):nth-child(-n+15) | 选择一组同级元素的第 8 到第 15 个 <p> 个元素。 |
CSS :nth-child() 示例
下面是如何仅选择段落元素并设置其样式的示例 -
<html>
<head>
<style>
p, em {
display: inline-block;
border: 3px solid black;
margin: 5px;
padding: 5px;
}
.box1 p:nth-child(2n+1),
.box2 p:nth-child(2n+1),
.box3 p:nth-of-type(2n + 1) {
background-color: pink;
color: blue;
}
</style>
</head>
<body>
<h4>Styling all odd-numbered (1,3,5,7) paragraphs with a pink background and blue font color.</h4>
<div class="box1">
<p>Orange</p>
<p>Apple</p>
<p>Mango</p>
<p>Grapes</p>
<p>Banana</p>
<p>Watermelon</p>
<p>Cheery</p>
<p>Pear</p>
</div>
<h4>Styling all odd-numbered paragraphs (1, 3, 7, etc.) with a pink background and blue font color, except for sentence 5, which is not a paragraph element.</h4>
<div class="box2">
<p>Orange</p>
<p>Apple</p>
<p>Mango</p>
<p>Grapes</p>
<em>Banana</em>
<p>Watermelon</p>
<p>Cheery</p>
<p>Pear</p>
</div>
<h4>Styling paragraphs (1, 4, 6, 8 ) with a pink background and blue except sentence 3 because it's not a paragraph element.</h4>
<div class="box3">
<p>Orange</p>
<p>Apple</p>
<em>Mango</em>
<p>Grapes</p>
<p>Banana</p>
<p>Watermelon</p>
<p>Cheery</p>
<p>Pear</p>
</div>
</body>
</html>
CSS :nth-child() - 列表示例
下面是一个示例，说明如何在 ol 列表中设置 li 元素的样式 -
<html>
<head>
<style>
li:nth-child(1) {
font-weight: bold;
color: red;
}
li:nth-child(3n+4){
background-color: pink;
}
li:nth-child(n+6){
font-weight: bold;
}
</style>
</head>
<body>
<p>Styling first list as bold and red.</p>
<p>Styling every third list item starting with the fourth list item with a pink background.</p>
<p>Styling all list items from the sixth list item onwards as bold.</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ol>
</body>
</html>
CSS :nth-child(） - <选择器>
带有 of <selector> 元素的 伪类 :nth-child() 的语法如下：
li:nth-child(even of .fruits) {
/* Your styles here */
}
将选择器 li.fruits 移到函数外部将选择具有 fruits 类的所有 li 元素，无论它们在子元素列表中的位置如何。
li.fruits: nth-child(-n + 3);
下面是一个如何使用 ：nth-child（even of .fruits） 伪类的示例。这将选择 .fruits 元素的所有偶数子元素 -
<html>
<head>
<style>
ul {
list-style-type: none;
}
li {
display: inline-block;
border: 3px solid black;
margin: 5px;
padding: 5px;
}
.fruits {
background-color: pink;
}
li:nth-child(even of .fruits) {
font-weight: bold;
color: blue;
}
</style>
</head>
<body>
<h3>Selects all even-numbered child elements of the class .fruits.</h3>
<ul>
<li>Orange</li>
<li class="fruits">Apple</li>
<li class="fruits">Mango</li>
<li class="fruits">Grapes</li>
<li class="fruits">Banana</li>
<li>Watermelon</li>
<li class="fruits">Cheery</li>
<li class="fruits">Pear</li>
</ul>
</body>
</html>
CSS :nth-child() - <选择器>与<选择器>第 n 个子
下面是一个示例，说明如何使用 :nth-child() 伪类根据元素在兄弟姐妹中的位置来选择元素，相对于另一个元素 -
<html>
<head>
<style>
ul {
list-style-type: none;
}
li {
display: inline-block;
border: 3px solid black;
margin: 5px;
padding: 5px;
}
.fruits {
background-color: pink;
}
ul.list1 > li:nth-child(-n + 2 of .fruits) {
color: blue;
}
ul.list2 > li.fruits:nth-child(-n + 4) {
color: blue;
}
</style>
</head>
<body>
<p>Styling the first two child elements (with .fruits class) in the list.</p>
<ul class="list1">
<li>Orange</li>
<li class="fruits">Apple</li>
<li>Mango</li>
<li class="fruits">Grapes</li>
<li class="fruits">Banana</li>
<li>Watermelon</li>
<li>Cheery</li>
<li class="fruits">Pear</li>
</ul>
<p>Select the first four child elements that are both .fruits elements and in the .list2 list.</p>
<ul class="list2">
<li class="fruits">Orange</li>
<li>Apple</li>
<li class="fruits">Mango</li>
<li>Grapes</li>
<li>Banana</li>
<li class="fruits">Watermelon</li>
<li>Cheery</li>
<li class="fruits">Pear</li>
</ul>
</body>
</html>
CSS :nth-child() - 用于修复表条的选择器
下面是一个示例，说明如何使用 :nth-child() 伪类来设置表中偶数行的样式，即使某些行是隐藏的 -
<html>
<head>
<style>
table {
margin: 20px;
}
.even-rows > tbody > tr:nth-child(even) {
background-color: pink;
}
.even-rows-hidden > tbody > tr:nth-child(even of :not([hidden])) {
background-color: pink;
}
</style>
</head>
<body>
<p>Selector selects all even rows in the tbody of a table.</p>
<table class="even-rows">
<thead>
<tr>
<th>First Names</th>
<th>Last Names</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jhon</td>
<td>Sean</td>
</tr>
<tr>
<td>Rocky</td>
<td>Luis</td>
</tr>
<tr hidden>
<td>Oliver</td>
<td>David</td>
</tr>
<tr>
<td>Marry</td>
<td>Alamnd</td>
</tr>
<tr>
<td>Dora</td>
<td>Ann</td>
</tr>
<tr>
<td>Tonny</td>
<td>Rai</td>
</tr>
</tbody>
</table>
<p>Selector selects all even rows in the tbody of a table, but skips any rows that are hidden.</p>
<table class="even-rows-hidden">
<thead>
<tr>
<th>First Names</th>
<th>Last Names</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jhon</td>
<td>Sean</td>
</tr>
<tr>
<td>Rocky</td>
<td>Luis</td>
</tr>
<tr hidden>
<td>Oliver</td>
<td>David</td>
</tr>
<tr>
<td>Marry</td>
<td>Alamnd</td>
</tr>
<tr>
<td>Dora</td>
<td>Ann</td>
</tr>
<tr>
<td>Tonny</td>
<td>Rai</td>
</tr>
</tbody>
</table>
</body>
</html>
