奇怪的行为为：第一个孩子和第十八个孩子

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。