如何使用：last-child選擇器？

Question

我想簡單地添加一個border-bottom到最後.slab

我試了幾件事，我無法理解發生了什麼。

案例1 - 使用.wrapper:last-child

如果我試試這codepen.io或＃2段，我沒有得到去年.slab

一個border-bottom如果我試試這JSFiddle或運行代碼分別在Chrome中，我得到border-bottom最後.slab。但是，如果我取消註釋<div class="something">New</div>，則最後.slab上的border-bottom在JSFiddle和Chrome上都會消失。

.wrapper { 
 
    width: 10em; 
 
    margin: 1em; 
 
} 
 
.wrapper:last-child { 
 
    border-bottom: 1px solid #999; 
 
} 
 
.slab { 
 
    background-color: #eee; 
 
    border-top: 1px solid #999; 
 
    padding: 1em; 
 
}

<div class="wrapper"> 
 
    <div class="slab">Hello</div> 
 
    <div class="slab">Hello</div> 
 
    <div class="slab">Hello</div> 
 
</div> 
 
<!--<div class="something">New</div>-->

案例2 - 使用.slab:last-child

原來這個作品無處不在 - 的jsfiddle，鉻，codepen.io和＃2。但我認爲選擇是真正的最後孩子的.slab而不是最後.slab

.wrapper { 
 
    width: 10em; 
 
    margin: 1em; 
 
} 
 
.slab { 
 
    background-color: #eee; 
 
    border-top: 1px solid #999; 
 
    padding: 1em; 
 
} 
 
.slab:last-child { 
 
    border-bottom: 1px solid #999; 
 
}

<div class="wrapper"> 
 
    <div class="slab">Hello</div> 
 
    <div class="slab">Hello</div> 
 
    <div class="slab">Hello</div> 
 
</div>

問題：

1. 是否.slab:last-child意味着最後一個孩子.slab或最後一次出現.slab？
2. case 1，爲什麼border-bottom在引入無關元素.something後消失？
3. 將border-bottom應用到最後.slab的最佳方式是什麼？

Answer 1

1. 是否.slab:last-child意味着.slab的最後一個孩子或.slab最後一次出現？

   都沒有。它匹配

   • 有「板」類的元素，
   • 是其父的最後一個孩子。

   
   其父母中的最後.slab未必是其最後一個孩子。 .slab:last-child將匹配當且僅當兩個條件對於給定元素均爲真。

2. 在殼體1，爲什麼是border-bottom引入一個不相關的元件.something的後消失？

   因爲那麼.wrapper的父親的最後一個孩子成爲那個其他元素。這個元素與.wrapper無關 - 它與它的下一個兄弟相關。

   該包裝內的.slab元素從來沒有接收到邊框;只要它是其父母的最後一個孩子，該邊框就被應用於.wrapper。 （順便說一下，在你的例子.wrapper父隱含爲body）

3. 什麼是應用border-bottom最後.slab的最佳方式？

   您將無法做到這一點，除非確實可以保證你的.wrapper唯一可能的孩子.slab元素，在這種情況下，類名，然後就變得相當無關（但你仍然可以將其包含在你的選擇器，以避免匹配.wrapper的最後一個孩子，當它是而不是 a .slab）。

Answer 2

:last-childstructural pseudo-class selector適用於父母的兄弟姐妹。它相當於:nth-last-child(1)，

在代碼方面，你將適用於:last-child到.slab選擇父div.wrapper的最後一個兄弟。

如果div.wrapper的最後一個孩子沒有slab類，那麼選擇器將不匹配。它什麼都不會做。

如果:last-child被應用到的div.wrapper的div孩子，像這樣：

.wrapper > div:last-child { ... }

...那麼選擇器將匹配最後一個孩子，而不管class,id或其他屬性如何。它將匹配任何div。如果最後一個孩子不是div，則選擇器將不會執行任何操作。

如果你想匹配的div.wrapper的最後一個孩子，不管什麼 –這意味着它只是需要最後一個孩子–那麼你可以做這樣的事情：

.wrapper > *:last-child { ... }

沒有>孩子combinator，比方說.wrapper *:last-child { ... }，所有後代父元素的最後一個孩子將匹配。

---

當您選擇.wrapper:last-child，你的目標與wrapper類的元素是它的父的最後一個子（大概body，在這種情況下）。

如果div.wrapper是其父母的獨子，然後:last-child，:first-child，:only-child和大多數其他結構性僞類的關鍵字選擇將匹配。

---

爲了更好地理解這些選擇（和所有其他人）的，指的是CSS規範的這一部分： http://www.w3.org/TR/css3-selectors/#selectors

Answer 3

last-child意味着什麼是說...的最後元素那是一位父母的孩子。

不是最後一個類......最後一個元素。

沒有last-of-class選擇器。

這個：.slab:last-child是指最後一個孩子，也有一類.slab。

如果它不是最後一個孩子，它將不適用，同樣，如果它沒有一個.slab類，它將不會被選中。