仅仅是我,还是: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;
}
第二个例子:(哪个 隐藏b
- 由于某种原因)
body .b:nth-child(1) {
display: none;
}
第三个例子:( 最终隐藏b
- 由于某种原因)
body .b:nth-child(2) {
display: none;
}
有没有人对这种行为有合理的解释?
答案 0 :(得分:4)
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
。