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

时间:2014-10-03 12:35:21

标签: css css3 css-selectors

仅仅是我,还是: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

有没有人对这种行为有合理的解释?

1 个答案:

答案 0 :(得分:4)

first-childnth-child(1)表示第一个 节点。 span.a是第一个节点。使用组合选择器并不重要。 .b不是第一个孩子,因此未选中。

在这种情况下,您可以使用.b:first-of-type,因为divspan是不同的类型,但如果它们都是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