问题

当时写在写一个列表，列表每一项需要下面加下划线，最后一项不加下划线。第一时间，想到使用 :``last-child 这个伪类来实现。

当时的代码出来的 HTML 片段大致是这样的（省略号代表还有其他元素）：

  1. <div class="list-box">
  2.     <div class="list-item">...</div>
  3.   <div class="list-item">...</div>
  4.   <div class="list-item">...</div>
  5.   <!-- 最后两行是由vant的list组件添加的 -->
  6.   <div class="van-list__finished-text">沒有更多數據了</div>
  7.   <div class="van-list__placeholder"></div>
  8. </div>

样式是这样的：

  1. .list-item {
  2.     border-bottom: #eaeaea 1px solid;
  3. }
  4. .list-item:last-child {
  5.     border-bottom: 0;
  6. }

然后一直没搞明白，为啥最后一行的底部还有下划线呢。

思考

于是我查了 last-child 的定义：

:last-child CSS 伪类 代表父元素的最后一个子元素。

这句定义的重点是元素。

然后我得到第一次的推断：只是通过 :list-item 来定位到父元素而已， :list-child 依然会在父元素上去找最后一个子元素

于是我有写了另外一个例子：

  1. <style>
  2.   .list-box {
  3.     width: 200px;
  4.   }
  6.   .list-box .list-item {
  7.     background: red;
  8.     height: 100px;
  9.   }
  11.   .list-box div {
  12.     background: yellow;
  13.     height: 100px;
  14.   }
  16.   .list-box .list-item:last-child {
  17.     background: green;
  18.   }
  19. </style>
  20. <body>
  21.   <div class="list-box">
  22.     <div class="list-item">111</div>
  23.     <div class="list-item">222</div>
  24.     <div class="list-item">333</div>
  25.     <div>沒有更多數據了</div>
  26.   </div>
  27. </body>

结果最后一个 div 并没有变绿，所以证明我得推测是错误的。
image.png
然后我又改变了例子，把最后一个样式修改为：

  2. .list-box div:last-child {
  3.     background: green;
  4.  }

就生效了：
image.png
那就可以得出结论了：
对于样式 selector:last-child ，要想目标元素生效：既要满足 selector 选择器，还要是当前选择器的父元素最后一个元素。
**