css进阶：:last-child 与: last-of-type 的区别

2018-05-3121:33:24网页制作css进阶：:last-child 与: last-of-type 的区别已关闭评论2,086 views字数 1081阅读模式

做列表的时候，会经常遇到最后一个元素与其他元素在样式上会有差异的情况。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3616.html

如果是单纯的静态页面，可以使用class去控制。也可以在页面渲染结束之后，使用js去控制。若对于兼容性的要求并非那么严格，可以使用css去控制。个人建议使用css控制。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3616.html

然而，就在这种情况下，我遇到了一个问题，就是:last-child与:last-of-type经常搞混，不知什么情况下使用哪个。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3616.html

为了解决这个一直困扰我的问题，我查了一下CSS手册。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3616.html

:last-child文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3616.html

关于:last-child手册中是这么解释的：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3616.html

The :last-child CSS pseudo-class represents the last element among a group of sibling elements.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3616.html

CSS伪类:last-child代表在一群兄弟元素中的最后一个元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3616.html

举个栗子：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3616.html

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

css进阶：:last-child 与: last-of-type 的区别文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3616.html

从代码和图可以看出:last-child选择了最后一个li标签。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3616.html

同时，我们换另外一段代码，看看是否还有这样的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3616.html

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

css进阶：:last-child 与: last-of-type 的区别文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3616.html

从代码和图可以看出，:last-child并没有起到我们想要的作用。如果，这个时候去掉最后的div标签，再看看效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3616.html

css进阶：:last-child 与: last-of-type 的区别文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3616.html

这时，效果出来了，那么，可以总结了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3616.html

:last-child表示其父文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3616.html

  • 本站内容整理自互联网，仅提供信息存储空间服务，以方便学习之用。如对文章、图片、字体等版权有疑问，请在下方留言，管理员看到后，将第一时间进行处理。
  • 转载请务必保留本文链接：https://www.cainiaoxueyuan.com/zhizuo/3616.html