: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！
相关推荐
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18