CSS - 伪类：nth-last-child()_CSS 菜鸟教程

CSS伪类 :nth-last-child（） 根据元素在一组兄弟姐妹中的位置匹配元素，从最后开始计算。

语法

:nth-last-child(<nth> [of <complex-selector-list>]?) {
	 	/* ... */
}

可能的值

奇数 − 此值表示从末尾开始计数的系列中的所有奇数（例如，1,3,5..etc）同级元素。
偶数 − 此值表示从末尾开始计数的系列中的所有偶数（例如，2,4,6...等）同级元素。
函数表示法（<an+b>） − 此值表示从其父容器的末尾开始计数的序列中的每个 an+b 子元素，其中 a 是正整数，n 是从 0 开始的计数器变量。b 是另一个正整数。

下表描述了 CSS 选择器的列表及其说明：

选择器	描述
tr:nth-last-child(odd) or tr:nth-last-child(2n+1)	表示 HTML 表中的所有奇数行。
tr:nth-last-child(even) or tr:nth-last-child(2n)	表示 HTML 表中的所有偶数行。
:nth-last-child(6)	代表第六个元素，从末尾开始计算。
:nth-last-child(5n)	表示每五个元素（5、10、15 等），从末尾开始计数。
:nth-last-child(3n+4)	代表元素 4、7、10、13 等，从末尾开始计数。
:nth-last-child(-n+2)	表示一组同级产品中的最后两个元素。
p:nth-last-child(n) or p:nth-last-child(n+1)	表示一组同级<p>元素。
p:nth-last-child(1) or p:nth-last-child(0n+1)	表示一组兄弟姐妹中的第一个元素的每个 <p>，从末尾开始计数。

CSS :nth-last-child（） - 列表示例

下面是一个示例，说明如何在 ol 列表中设置 li 元素的样式 -

<html>
<head>
<style>
	 	li:nth-last-child(-n+1) {
	 	 	 font-weight: bold;
	 	 	 color: red;
	 	}
	 	li:nth-last-child(3n+4){
	 	 	 background-color: pink;
	 	}
	 	li:nth-last-child(5n){
	 	 	 font-weight: bold;
	 	}
</style>
</head>
<body>
	 	<p>Styling last item as bold and red color.</p>
	 	<p>Styling every third list item starting with the fourth list item from the last with a pink background.</p>
	 	<p>Styling fifth item from last 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-last-child（） - 表格示例

下面是一个示例，如何为表中的特定行设置样式 -

<html>
<head>
<style>
	 	table {
	 	 	 border: 3px solid black;
	 	}
	 	tr:nth-last-child(6) {
	 	 	 font-weight: bold;
	 	 	 color: blue;
	 	}
	 	tr:nth-last-child(odd) 	{
	 	 	 background-color: pink;
	 	}
	 	tr:nth-last-child(even) 	{
	 	 	 background-color: greenyellow;
	 	}
</style>
</head>
<body>
	 	<p>Styling the heading of the table as bold and blue in color.</p>
	 	<p>Styling all odd-numbered rows from the end with a pink background color.</p>
	 	<p>Styling all even-numbered rows from the end with a greenyellow background color.</p>
	 	<table>
	 	 	 <tr>
	 	 	 	 	<th>Names</th>
	 	 	 </tr>
	 	 	 <tr>
	 	 	 	 	<td>Jhon Sean</td>
	 	 	 </tr>
	 	 	 <tr>
	 	 	 	 	<td>Rocky Luis</td>
	 	 	 </tr>
	 	 	 <tr>
	 	 	 	 	<td>Oliver David</td>
	 	 	 </tr>
	 	 	 <tr>
	 	 	 	 	<td>Marry Alamnd</td>
	 	 	 </tr>
	 	 	 <tr>
	 	 	 	 	<td>Dora Ann</td>
	 	 	 </tr>
	 	</table>
</body>
</html>

CSS :nth-last-child（） - 段落示例

以下是如何设置段落样式的示例 -

<html>
<head>
<style>
	 	p:nth-last-child(n){
	 	 	 color: red;
	 	}
	 	p:nth-last-child(1){
	 	 	 color: blue;
	 	}
</style>
</head>
<body>
	 	<h3>Styled all paragraphs with red color.</h3>
	 	<h3>Sets the text color of the last paragraph to blue.</h3>
	 	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
	 	<p>It is a long established fact that a reader will be distracted by the readable content.</p>
	 	<p>Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
	 	<p>The standard chunk of Lorem Ipsum used since the 1500s</p>
</body>
</html>

CSS :nth-last-child（） - <选择器>

带有 <selector> 元素的 :nth-last-child（） 伪类的语法：

li:nth-last-child(even of .fruits) {
	 	/* Your styles here */
	}

将选择器 li.fruits 移到函数外部将选择具有 fruits 类的所有 li 元素，无论它们在子元素列表中的位置如何。

li.fruits: nth-last-child(-n + 3);

下面是一个示例，说明如何使用 :nth-last-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-last-child(1 of .fruits) {
	 	 	 font-weight: bold;
	 	 	 color: blue;
	 	}
</style>
</head>
<body>
	 	<h3>Styling list items with the class fruits to have a pink background.</h3>
	 	<h3>Counting from the last child, styling first child element of the fruits class.</h3>
	 	<ul>
	 	 	 <li>Orange</li>
	 	 	 <li>Apple</li>
	 	 	 <li class="fruits">Mango</li>
	 	 	 <li>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() CSS - 伪类 :nth-last-of-type() >>