奇怪的行爲爲：第一個孩子和第十八個孩子

Question

它只是我，或者是:first-child和:nth-child不符合邏輯的方式？

如果只是我，請解釋我是如何工作的。

下面是使用的3個例子，我真的不明白：

我的HTML如下：

<div class="footer"> 
    <span class="a">a</span> 
    <div class="b">b</div> 
</div> 

第一個例子：（這不隱藏b - 類由於某種原因）

body .b:first-child { 
    display: none; 
} 

see fiddle

第二個例子：（這不隱藏b -class出於某種原因）

body .b:nth-child(1) { 
    display: none; 
} 

see fiddle

第三個例子：（這終於隱藏b - 班級出於某種原因）

body .b:nth-child(2) { 
    display: none; 
} 

see fiddle

沒有人有此行爲的合乎邏輯的解釋？

Answer 1

first-child和nth-child(1)意味着第一子節點。 span.a是第一個節點。使用組合選擇器並不重要。 .b不是第一個孩子，所以沒有被選中。

在這種情況下，你可以使用.b:first-of-type因爲div和span是不同的類型，但如果他們都span s表示是行不通的。使用一個額外的選擇像.b也不會有多大效果與第n個孩子選擇除了在同類個案：

<div> 
    <div class=b>b</div> 
</div> 
<div> 
    <div>not b</div> 
</div> 
<div> 
    <div class=b>b</div> 
</div> 

那麼你可能有一個使用了.b:first-child。