CSS 伪类

CSS 伪类 :last-child 表示包含元素内的最后一个元素。

伪类 :last-child 类似于 :last-of-type ，但前者更具体，目标是父元素的最后一个子元素，而后者则匹配指定元素的最后一次出现。

语法

:last-child {
    /* ... */
}

CSS :last-child 示例

以下示例演示了 :last-child 伪类的使用。在此示例中，CSS 规则仅适用于 <div> 元素中找到的最后一个 <p> 元素，同一容器中的其他 <p> 元素不受影响。

<html>
<head>
<style>
   p:last-child {
      color: black;
      background: yellow;
      font-weight: 600;
      font-size: 1em;
      font-style: italic;
      padding: 5px;
   }
   div {
      border: 2px solid black;
      margin-bottom: 5px;
   }
</style>
</head>
<body>
      <div>父元素
       <p>第一个孩子，所以没有变化</p>
       <p>第二个/最后一个子级，因此：应用了最后一个子级伪类</p>
    </div>
    <div>父元素
       <h2>h3标签，所以没有改变</h2>
       <p><p> 标签，是最后一个子标签。</p>
    </div>
</body>
</html>

以下示例演示了 :last-child 伪值的使用类，应用于 <li> 标记，位于 <ul> 父元素下。在此示例中，CSS 规则仅适用于 <ul> 元素中找到的最后一个 <li> 元素，同一容器中的其他 <li> 元素不受影响。

<html>
<head>
<style>
   ul li:last-child {
      color: black;
      background: peachpuff;
      font-weight: 600;
      font-size: 1em;
      font-style: italic;
      padding: 5px;
   }
   div {
      border: 2px solid black;
      margin-bottom: 5px;
      width: 300px;
   }
</style>
</head>
<body>
   <div>
      <ul>
         <li>One</li>
         <li>Two</li>
         <li>Three
      </ul>
   </div>
</body>
</html>