CSS 伪类选择器 last-child 和 last-of-type 的区别-HTML/CSS- WEB程序开发笔记

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

原创
作者：phpEcho
发布时间：2022-09-01 17:27
标签： HTML CSS
浏览量：566

在日常前端开发工作中，总有最后一个同类元素进行特殊的样式处理需求。我们一般会用到 CSS 伪类:last-child 或:last-of-type，但有时会遇到不起作用的效果，基于此，本文通过示例代码详细介绍二者的区别，希望对大家的学习和工作有所帮助。

[TOC]

# “最后一个”伪类选择器

## :last-child

- **语法**

`element:last-child { style properties }`

- **解释**

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

- **正例**

- 代码

```
  
  <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>

<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> 
    <div class="item">第 7 行</div> 
  </div>
  ```

- 效果截图
    ![last-child正例效果截图](https://cnd.51blog.xyz/images/mywrite/last-child-positive-example.png)

- **反例**

- 代码

```
  
  <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>

- **效果截图**
    ![last-child反例效果截图](https://cnd.51blog.xyz/images/mywrite/last-child-negative-example.png)

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

## :last-of-type

- **语法**

`element:last-of-type { style properties }`

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

- **示例 1**

- 代码

```
    
    <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>

<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> 
      <div class="item">第 7 行</div> 
    </div>
  ```

- **效果截图**
    ![last-child反例效果截图](https://cnd.51blog.xyz/images/mywrite/last-of-type-positive-example.png)

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

- **示例 2**

- **代码**

```
  
  <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>

<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>  
    <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>  
      <div class="item">第 5 行</div>
    </div>
  </div>
  ```

- **效果截图**
    ![last-child反例效果截图](https://cnd.51blog.xyz/images/mywrite/last-of-type-positive-example2.png)

## 总结

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

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

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

- `element:last-of-type` 只要是其父元素的最后一个匹配 `element` 选择器的元素即可生效。甚至会对后代满足匹配规则的元素也生效。
> last-of-type 本文只做了基本介绍，它还有其他匹配规则，比如元素分组等，由于目前还没有找到合适资源，后续会继续分享，将请期待！

## 参考文章

- [CSS 选择器 :last-child 与:last-of-type 的区别](https://www.cnblogs.com/mmzuo-798/p/11891836.html)
- [css 中:last-child 不生效的解决方法](https://www.jb51.net/css/840312.html)
- [:last-of-type - CSS（层叠样式表） | MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:last-of-type)
- [:last-child - CSS（层叠样式表） | MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:last-child)

WEB程序开发笔记

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

文章归档

推荐文章

热门标签

友情链接