高级 CSS：:last-child 和 :last-of-type 的区别

terry 2年前 (2023-09-27) 阅读数 84 #数据结构与算法

在制作列表时，经常会遇到最后一个元素与其他元素不同的情况。

如果只是静态页面，可以使用class来控制。也可以在页面渲染完成后使用js来控制。如果匹配条件不是太严格，可以使用css来控制。我个人推荐使用css控件。

但是，在这种情况下我遇到了一个问题，即：：last-child和：last-of-type经常混淆，我不知道。现在是什么状况。谁会被使用。

为了解决这个困扰我的问题，我查阅了CSS书籍。

:last child

关于:last child书上是这样解释的：

The:last child代表最后一个伪类元素的CSS组。 CSS伪类：最后一个子元素表示一组元素中的最后一个元素。

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        li {
            border-bottom: 1px solid #AAAAAA;
        }
        li:last-child {
            border-bottom-color: #F00;
        }
    </style>
</head>
<body>
    <ul>
        <li>我是第1个li元素的内容</li>
        <li>我是第2个li元素的内容</li>
        <li>我是第3个li元素的内容</li>
        <li>我是最后一个li元素的内容</li>
    </ul>
</body>
</html>

从代码和图像中可以看出，:last-child选择了最后一个符号li。

既然如此，我们换一个代码看看是否还有同样的效果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        p {
            border-bottom: 1px solid #AAAAAA;
        }
        p:last-child {
            border-bottom-color: #F00;
        }
    </style>
</head>
<body>
    <p>我是第1个p元素的内容</p>
    <p>我是第2个p元素的内容</p>
    <p>我是第3个p元素的内容</p>
    <p>我是最后一个p元素的内容</p>
    <div>我是个干扰元素</div>
</body>
</html>

从代码和图片中可以看到，:last-child并没有起到我们想要的作用。如果此时删除最后一个 div 标签，请再次检查结果。

当时结果就出来了，可以总结一下。

：最后一个孩子指的是他的父母