css - :first-child and :nth-child 的奇怪行为

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) 表示first child 节点。 span.a 是第一个节点。使用组合选择器并不重要。 .b 不是第一个 child ，所以没有被选中。

在这种情况下，您可以使用 .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。