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!