CSS - 伪类 :nth-child()

上一页
下一页

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>
打印本页
上一页
下一页