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>
