:last-child的坑-CSS3選擇器

時間 2019-12-05

標籤 child css3 css 選擇器欄目 CSS 简体版

原文原文鏈接

CSS3選擇器之:last-child - Eric

真實經歷html

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

爲了保證下拉框的內容隨着頁面滾動，antd提供了getPopupContainer屬性，能夠自定義下拉框的參照對象，因而本身寫了以下代碼：測試

<Select 
    getPopupContainer={ triggerNode => triggerNode.parentNode }
>
   <Option>{somecode...}</Option>
</Select>

這樣寫了以後發現右邊的邊框沒有了，如圖
spa

因而排查緣由，發現以下代碼不起做用：code

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

界面代碼大概以下：htm

<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>

小夥伴們思考一下，樣式會起做用嗎？對象

實驗之旅ip

之前也沒寫過這樣的代碼，通常一個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>

結果如圖：
get

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僞類選擇器須要知足兩個條件：
一、知足選擇器的基本要求(.person p)
二、必須是子元素中最後一個元素

今天的分享就到這裏了，有興趣的小夥伴能夠多多測試其餘case！