:last-child的坑-CSS3选择器

CSS3选择器之:last-child - Eric

真实经历

最近开发项目的时候发现了一个这么多年忽略的问题，和大家分享一下。
项目使用的是Antd组件库，有一个搜索框是这样的：技术图片

为了保证下拉框的内容随着页面滚动，antd提供了getPopupContainer属性，可以自定义下拉框的参照对象，于是自己写了如下代码：

<Select 
    getPopupContainer={ triggerNode => triggerNode.parentNode }
>
   <Option>{somecode...}</Option>
</Select>

这样写了之后发现右边的边框没有了，如图
技术图片

于是排查原因，发现如下代码不起作用：

.wmstool-input-group.wmstool-input-group-compact > .wmstool-select:last-child > .wmstool-select-selection {
  border-right-width: 1px;
}

界面代码大概如下：

<div class="wmstool-input-group-compact">
    <div class="wmstool-select"></div>
    <div class="wmstool-select">
        <div class="wmstool-select-selection"></div>
    </div>
    <div style=""></div>
</div>

小伙伴们思考一下，样式会起作用吗？

实验之旅

以前也没写过这样的代码，一般一个div中包含的都是同类型的，自己就开始测试起来，代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <style>
      .person p:last-child {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="person">
      <p>姓名： 小明</p>
      <p>性别： 男</p>
      <div class="intro">xxxxxxx</div>
    </div>
    <div class="person">
      <p>姓名： 小红</p>
      <p>性别： 女</p>
      <div class="intro">xxxxxxx</div>
    </div>
  </body>
</html>

结果如图：
技术图片

What!，说好的class为person中最后一个p标签会变红的呢，接下来我们再实验，代码如下：

<div class="person">
  <p>姓名： 小明</p>
  <div class="intro">xxxxxxx</div>
  <p>性别： 男</p>
</div>
<hr/>
<div class="person">
  <p>姓名： 小红</p>
  <p>性别： 女</p>
  <div class="intro">xxxxxxx</div>
</div>

结果如图：
技术图片

总结

从两次实验我们可以看出，:last-child伪类选择器需要满足两个条件：
1、满足选择器的基本要求(.person p)
2、必须是子元素中最后一个元素

今天的分享就到这里了，有兴趣的小伙伴可以多多测试其他case！