CSS - 伪类

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>将最后一项的样式设置为粗体和红色。</p>
  <p>从最后一个列表项开始，每隔三个列表项设置粉红色背景样式。</p>
  <p>将最后一项的第五项设置为粗体。</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>将表格标题的样式设置为粗体和蓝色。</p>
  <p>使用粉红色背景颜色从末尾开始设置所有奇数行的样式。</p>
  <p>使用绿黄色背景颜色设置从末尾开始的所有偶数行的样式。</p>
   <table>
      <tr>
         <th>名字</th>
      </tr>
      <tr>
         <td>张三</td>
      </tr>
      <tr>
         <td>李四</td>
      </tr>
      <tr>
         <td>王五</td>
      </tr>
      <tr>
         <td>赵六</td>
      </tr>
      <tr>
         <td>孙七</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>将所有段落设置为红色。</h3>
    <h3>将最后一段的文本颜色设置为蓝色。</h3>
    <p>碧玉妆成一树高，</p>
    <p>万条垂下绿丝绦。</p>
    <p>不知细叶谁裁出，</p>
    <p>二月春风似剪刀。</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（甚至是 .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>将水果类列表项的样式设置为粉红色背景。</h3>
  <h3>从最后一个子元素开始计数，设置水果类的第一个子元素的样式。</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>