当前位置：首页 > news >正文

CSS 伪类选择器 last-child 和 last-of-type 的区别

news 来源：原创 2024/6/30 21:36:53

文章目录

“最后一个”伪类选择器
- :last-child
- :last-of-type
- 总结
- 参考文章

“最后一个”伪类选择器

: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 选择器的元素即可生效。甚至会对后代满足匹配规则的元素也生效。