CSS伪类 - :nth-last-child()

CSS :nth-last-child() 伪类根据元素在其同级元素中的位置进行匹配，从末尾开始计数。

语法

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

可能的值

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

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

选择器	描述
tr:nth-last-child(odd) 或 tr:nth-last-child(2n+1)	表示HTML表格中的所有奇数行。
tr:nth-last-child(even) 或 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) 或 p:nth-last-child(n+1)	表示同级元素组中的每个 <p> 元素。
p:nth-last-child(1) 或 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>

使用<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>

打印页面