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

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 - 由于某种原因）

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，那将无法运作。使用像.b这样的附加选择器对nth-child选择器没有多大帮助，除非在以下情况下：

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

然后您可以使用.b:first-child。