:last-child的坑-CSS3選擇器

ccj659 發布于2019-08-02 11:54 / 3086人閱讀

摘要：選擇器之真實經歷最近開發項目的時候發現了一個這么多年忽略的問題，和大家分享一下。

CSS3選擇器之:last-child - Eric

真實經歷

最近開發項目的時候發現了一個這么多年忽略的問題，和大家分享一下。
項目使用的是Antd組件庫，有一個搜索框是這樣的：

為了保證下拉框的內容隨著頁面滾動，antd提供了getPopupContainer屬性，可以自定義下拉框的參照對象，于是自己寫了如下代碼：

這樣寫了之后發現右邊的邊框沒有了，如圖

于是排查原因，發現如下代碼不起作用：

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

界面代碼大概如下：

小伙伴們思考一下，樣式會起作用嗎？

實驗之旅

以前也沒寫過這樣的代碼，一般一個div中包含的都是同類型的，自己就開始測試起來，代碼如下：



  
    
    
  
  
    
      姓名： 小明
      性別： 男
      xxxxxxx
    
    
      姓名： 小紅
      性別： 女
      xxxxxxx

結果如圖：

What!，說好的class為person中最后一個p標簽會變紅的呢，接下來我們再實驗，代碼如下：


  姓名： 小明
  xxxxxxx
  性別： 男



  姓名： 小紅
  性別： 女
  xxxxxxx

結果如圖：

總結

從兩次實驗我們可以看出，:last-child偽類選擇器需要滿足兩個條件：
1、滿足選擇器的基本要求(.person p)
2、必須是子元素中最后一個元素

今天的分享就到這里了，有興趣的小伙伴可以多多測試其他case！

GPU云服務器云服務器 last-child 選擇器派生選擇器省市選擇器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53200.html

:last-child的坑-CSS3選擇器

摘要：選擇器之真實經歷最近開發項目的時候發現了一個這么多年忽略的問題，和大家分享一下。 CSS3選擇器之:last-child - Eric 真實經歷最近開發項目的時候發現了一個這么多年忽略的問題，和大家分享一下。項目使用的是Antd組件庫，有一個搜索框是這樣的：showImg(https://segmentfault.com/img/bVbi1UZ?w=380&h=52); 為了保證下...

13651657101 2019-08-29 17:09 評論0 收藏0
小程序/uniapp支持的css選擇器一覽

摘要：本次測試主要參考文檔為選擇器參考手冊主要是安卓微信小程序的選擇器兼容入坑小程序過程中看到微信對支持的選擇器的描述只有六個分別是但是看到給寫的花里胡哨的的庫還有各種花里胡哨的小程序并且還表明支持之前各種無的庫所以我覺得事情并沒有這么簡單趁著元本次測試主要參考文檔為w3school CSS 選擇器參考手冊 (主要是安卓/ios/微信小程序的css選擇器兼容) 入坑uniapp/小程序過...

MockingBird 2019-08-30 15:55 評論0 收藏0
常用css3選擇器

摘要：模糊匹配屬性選擇器標題選擇器匹配屬性值以標題指定值開頭的每個元素。選擇器用來匹配父元素中最后一個子元素。和和是可用于匹配下標是奇數或偶數的子元素的關鍵詞選擇器匹配同類型中的倒數第個同級兄弟元素。 1 2 3 4 5 p{ width:40px; margin:8px auto; line-height:40px; border:1px solid...

ytwman 2019-08-29 12:48 評論0 收藏0
常用css3選擇器

摘要：模糊匹配屬性選擇器標題選擇器匹配屬性值以標題指定值開頭的每個元素。選擇器用來匹配父元素中最后一個子元素。和和是可用于匹配下標是奇數或偶數的子元素的關鍵詞選擇器匹配同類型中的倒數第個同級兄弟元素。 1 2 3 4 5 p{ width:40px; margin:8px auto; line-height:40px; border:1px solid...

Cheng_Gang 2019-08-01 17:01 評論0 收藏0