“最后一个”伪类选择器

:last-child

• 语法

  element:last-child { style properties }
  

• 解释

  :last-child 代表在它父元素中的最后一个子元素。

• 正例

  • 代码

  <!-- CSS -->
  <style>
    .list {
      width: 300px;
      padding-left: 30px;
    }
  
    .list .item {
      background-color: #eee;
      padding: 6px 12px;
    }
  
    .list item:last-child { /* 关键代码：在.item类选择器上应用:last-child伪类 */
      background-color: green;
      color: yellow;
    }
  </style>
  
  <!-- HTML -->
  <div class="list">
    <p class="item">第 1 行</p>
    <p class="item">第 2 行</p>
    <p class="item">第 3 行</p>
    <p class="item">第 4 行</p>
    <p class="item">第 5 行</p>
    <p class="item">第 6 行</p> <!-- 以上都是 p 标签 -->
    <div class="item">第 7 行</div> <!-- 最后是 div 标签 -->
  </div>
  

  • 效果截图
    

• 反例

  • 代码

  <!-- CSS -->
  <style>
    .list {
      width: 300px;
      padding-left: 30px;
    }
  
    .list .item {
      background-color: #eee;
      padding: 6px 12px;
    }
  
    .list p.item:last-child { /* 关键代码：在.item类选择器上应用:last-child伪类，且增加了标签限制 */
      background-color: green;
      color: yellow;
    }
  </style>
  
  <!-- HTML -->
  <div class="list">
    <p class="item">第 1 行</p>
    <p class="item">第 2 行</p>
    <p class="item">第 3 行</p>
    <p class="item">第 4 行</p>
    <p class="item">第 5 行</p>
    <p class="item">第 6 行</p> <!-- 以上都是 p 标签 -->
    <div class="item">第 7 行</div> <!-- 最后是 div 标签 -->
  </div>
  

  • 效果截图
    

  反例为何没有生效呢？
  【关键点】 因为 div.list 最后一个元素是 div.item ，而不是 p.item。

:last-of-type

• 语法

  element:last-of-type { style properties }
  

• 解释 1
  :last-of-type 表示了在它父元素的子元素列表中，最后一个给定类型的元素。

• 示例 1

  • 代码

    <!-- CSS -->
    <style>
      .list {
        width: 300px;
        padding-left: 30px;
      }
  
      .list .item {
        background-color: #eee;
        padding: 6px 12px;
      }
  
      .list p.item:last-of-type { /* 关键代码：在.item类选择器上应用:last-of-type伪类，且增加了标签限制 */
        background-color: green;
        color: yellow;
      }
    </style>
  
    <!-- HTML -->
    <div class="list">
      <p class="item">第 1 行</p>
      <p class="item">第 2 行</p>
      <p class="item">第 3 行</p>
      <p class="item">第 4 行</p>
      <p class="item">第 5 行</p>
      <p class="item">第 6 行</p> <!-- 以上都是 p 标签 -->
      <div class="item">第 7 行</div> <!-- 最后是 div 标签 -->
    </div>
  

  • 效果截图
    

• 解释 2
  当代码类似 Parent tagName:last-of-type 的作用区域包含父元素的所有子元素中的最后一个选定元素，也包括子元素的最后一个子元素并以此类推。

• 示例 2

  • 代码

  <!-- CSS -->
  <style>
    .list {
      width: 300px;
      padding-left: 30px;
    }
  
    .list .list-children {
      padding-left: 30px;
    }
  
    .list .item {
      background-color: #eee;
      padding: 6px 12px;
    }
  
    .list p.item:last-of-type { /* 关键代码：在.item类选择器上应用:last-of-type伪类，且增加了标签限制 */
      background-color: red;
      color: yellow;
    }
  </style>
  
  <!-- HTML -->
  <div class="list"> <!-- 父列表 -->
    <p class="item">第 1 行</p>
    <p class="item">第 2 行</p>
    <p class="item">第 3 行</p>
    <p class="item">第 4 行</p>
    <p class="item">第 5 行</p>
    <p class="item">第 6 行</p>  <!-- 父列表的最后一个 p.item -->
    <div class="item">第 7 行</div>
    <div class="list-children"> <!-- 子列表 -->
      <p class="item">第 1 行</p>
      <p class="item">第 2 行</p>
      <p class="item">第 3 行</p>
      <p class="item">第 4 行</p>  <!-- 子列表的最后一个 p.item -->
      <div class="item">第 5 行</div>
    </div>
  </div>
  

  • 效果截图
    

总结

• element:last-child 必须要满足两个条件才能生效：

  • 必须是匹配 element 选择器的在同级（siblings）元素中的最后一个（即是其父元素的最后一个子元素）

  • element 选择器的在同级（siblings）元素中的最后一个元素必须与 element 选择器匹配。

• element:last-of-type 只要是其父元素的最后一个匹配 element 选择器的元素即可生效。甚至会对后代满足匹配规则的元素也生效。

  last-of-type 本文只做了基本介绍，它还有其他匹配规则，比如元素分组等，由于目前还没有找到合适资源，后续会继续分享，将请期待！

参考文章

• CSS 选择器 :last-child 与:last-of-type 的区别
• css 中:last-child 不生效的解决方法
• :last-of-type - CSS（层叠样式表） | MDN
• :last-child - CSS（层叠样式表） | MDN