选择嵌套的第一个子元素，而不使用css

Question

我有一大块HTML，我无法编辑（不使用JavaScript）。

我正在尝试使用CSS隐藏段落。该段落没有id。有没有办法只针对它而不是它的兄弟<p>使用CSS？

HTML：

<div id="foo">
     <div></div>
     <p> this is the paragraph to hide</p>
     <p> this one should not be affected</p>
</div>

Answer 1

这取决于您的标记结构。如果<p>是其父级的第一个孩子，则可以使用:first-child伪类，如下所示：

#foo p:first-child { /* or simply #foo :first-child */
    background-color: gold;
}

<强> WORKING DEMO

注意：如果您只想选择直接<p>孩子，则应使用children selector（a > b） as：#foo > p:first-child。

---

但是如果在第一个<p>元素之前还有其他兄弟节点，则可以使用CSS3 :first-of-type伪类来选择其父节点的子树中的第一个<p>元素： / p>

#foo p:first-of-type {
    background-color: gold;
}

<强> WORKING DEMO

同样，对于直接孩子，您可以使用#foo > p:first-of-type。

来自MDN：

  

:first-of-type CSS伪类代表了第一个兄弟   在其父元素的子元素列表中的类型。

您可以参考 my answer 了解更多信息。

Answer 2

这是其父母的第一个孩子，因此您可以明确地选择：

#foo > p:first-child