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！