Question

我有这个HTML：

<section id=mainContent">

    <h2>Lorremis</h2>

    <article class="one"></article>
    <article class="two"></article>
    <article class="three"></article>
    <article class="four"></article>
    <article class="five"></article>
    <article class="six"></article>
    <article class="seven"></article>
    <article class="eight"></article>
    <article class="nine"></article>

</section>

每篇文章都有一个图像和几个段落。

如果我应用以下css代码：

section#mainContent article:nth-child(2) {

    display: none;

}

我希望第二篇文章没有显示。但这不会发生。第一篇文章消失而不是第二篇。现在，如果我删除了h2标签，那么第一篇文章就会消失。

为什么会这样？

Answer 1

因为nth-child正在查看#mainContent的所有子项，而不仅仅是文章元素。根据定义，:nth-child()匹配在文档树中具有+ b-1兄弟节点的元素，因此将其与其所有兄弟节点（包括<h2>）进行比较。您可能正在寻找:nth-of-type。

Answer 2

正如其他人所说，nth-child选择与标签类型无关的子节点。您可以使用nth-of-type选择器

#mainContent article:nth-of-type(2) { display none; }

Answer 3

article:nth-child(2)字面意思是＆＃34;选择一个文章元素，这是其父母的第二个孩子＆＃34;。

在您的示例中，第一个孩子始终是h2。

Answer 4

此外，如果您需要兼容旧浏览器，您可以使用此选择器

#maincontent article:first-child + article {}

选择一个部分内的第一篇文章

4 个答案: