选择部分内的第一篇文章答案

【问题标题】：selecting first article inside of a section选择部分内的第一篇文章
【发布时间】：2014-05-25 16:15:28
【问题描述】：

我有这个 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 标签，第一篇文章就会消失。

这是为什么？

【问题讨论】：

标签： html css css-selectors pseudo-class

【解决方案1】：

另外，如果你需要兼容旧浏览器，你可以使用这个选择器

#maincontent article:first-child + article {}

【讨论】：

【解决方案2】：

正如其他人所说，nth-child 选择独立于标签类型的子项。您可以改用nth-of-type 选择器

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

【讨论】：

【解决方案3】：

article:nth-child(2) 字面意思是“选择一个文章元素，它是其父元素的第二个子元素”。

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

【讨论】：

【解决方案4】：

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

【讨论】：