关于:last-child的误解

  先上一段菜鸟教程中对它的用法的解释：

:last-child选择器用来匹配父元素中最后一个子元素。

  我也是这么一直简单地认为的。然而这样的理解其实是不全面的。最近有遇到一个场景是选中列表中的最后一项为它添加边框。我就照着我的理解写了（错误示范）：

    <ul class="container">
      <li class="item">one</li>
      <li class="item">two</li>
      <li class="item">three</li>
    </ul> 

   .item {
        margin-bottom: 10px;
    }
    .container:last-child{
        border: 1px solid #000000
    }

  本以为会选中<ul>中的最后一个<li>，结果却啥效果也没有：

  经过一番搜索才明白，:last-child实际上是一个伪类。它与其他选择器搭配使用的真正过程应该是：
  比如：selector:last-child

1. 查找与selector选择器匹配的所有同级元素
2. 在所有同级元素中查找最后一个元素
3. 检查这最后一个元素与selector是否匹配

  所以开头的场景的正确示范应该是:

  .container .item:last-child {
            border: 1px solid #000000;
    }

  达到效果：

参考文档：
https://www.runoob.com/cssref/sel-last-child.html
https://www.cnblogs.com/yzhihao/p/11593871.html

如果感到这篇文章对你有用，麻烦点个赞~