資訊專欄INFORMATION COLUMN
摘要：選擇器之真實(shí)經(jīng)歷最近開發(fā)項(xiàng)目的時候發(fā)現(xiàn)了一個這么多年忽略的問題，和大家分享一下。
CSS3選擇器之:last-child - Eric
真實(shí)經(jīng)歷
最近開發(fā)項(xiàng)目的時候發(fā)現(xiàn)了一個這么多年忽略的問題，和大家分享一下。
項(xiàng)目使用的是Antd組件庫，有一個搜索框是這樣的：
為了保證下拉框的內(nèi)容隨著頁面滾動，antd提供了getPopupContainer屬性，可以自定義下拉框的參照對象，于是自己寫了如下代碼：
這樣寫了之后發(fā)現(xiàn)右邊的邊框沒有了，如圖
于是排查原因，發(fā)現(xiàn)如下代碼不起作用：
.wmstool-input-group.wmstool-input-group-compact > .wmstool-select:last-child > .wmstool-select-selection {
border-right-width: 1px;
}
界面代碼大概如下：
小伙伴們思考一下，樣式會起作用嗎？
實(shí)驗(yàn)之旅
以前也沒寫過這樣的代碼，一般一個div中包含的都是同類型的，自己就開始測試起來，代碼如下：
姓名： 小明
性別： 男
xxxxxxx
姓名： 小紅
性別： 女
xxxxxxx
結(jié)果如圖：
What!，說好的class為person中最后一個p標(biāo)簽會變紅的呢，接下來我們再實(shí)驗(yàn)，代碼如下：
姓名： 小明
xxxxxxx性別： 男
姓名： 小紅
性別： 女
xxxxxxx
結(jié)果如圖：
總結(jié)
從兩次實(shí)驗(yàn)我們可以看出，:last-child偽類選擇器需要滿足兩個條件：
1、滿足選擇器的基本要求(.person p)
2、必須是子元素中最后一個元素
今天的分享就到這里了，有興趣的小伙伴可以多多測試其他case！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/53200.html
摘要：選擇器之真實(shí)經(jīng)歷最近開發(fā)項(xiàng)目的時候發(fā)現(xiàn)了一個這么多年忽略的問題，和大家分享一下。 CSS3選擇器之:last-child - Eric 真實(shí)經(jīng)歷 最近開發(fā)項(xiàng)目的時候發(fā)現(xiàn)了一個這么多年忽略的問題，和大家分享一下。項(xiàng)目使用的是Antd組件庫，有一個搜索框是這樣的：showImg(https://segmentfault.com/img/bVbi1UZ?w=380&h=52); 為了保證下...
摘要：本次測試主要參考文檔為選擇器參考手冊主要是安卓微信小程序的選擇器兼容入坑小程序過程中看到微信對支持的選擇器的描述只有六個分別是但是看到給寫的花里胡哨的的庫還有各種花里胡哨的小程序并且還表明支持之前各種無的庫所以我覺得事情并沒有這么簡單趁著元 本次測試主要參考文檔為w3school CSS 選擇器參考手冊 (主要是安卓/ios/微信小程序的css選擇器兼容) 入坑uniapp/小程序過...
摘要：模糊匹配屬性選擇器標(biāo)題選擇器匹配屬性值以標(biāo)題指定值開頭的每個元素。選擇器用來匹配父元素中最后一個子元素。和和是可用于匹配下標(biāo)是奇數(shù)或偶數(shù)的子元素的關(guān)鍵詞選擇器匹配同類型中的倒數(shù)第個同級兄弟元素。 1 2 3 4 5 p{ width:40px; margin:8px auto; line-height:40px; border:1px solid...
閱讀 1700·2021-11-24 09:39
閱讀 3161·2021-11-22 15:24
閱讀 3104·2021-10-26 09:51
閱讀 3293·2021-10-19 11:46
閱讀 2901·2019-08-30 15:44
閱讀 2228·2019-08-29 15:30
閱讀 2548·2019-08-29 15:05
閱讀 788·2019-08-29 10:55
