html - 使用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>是其 parent 的第一个 child ，您可以使用 :first-child 伪类如下:

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

WORKING DEMO

注意:如果您只想选择直接<p> child ，你应该使用children selector ( a > b ) 作为: #foo > p:first-child .

---

但是如果第一个之前还有其他 sibling <p>元素，你可以使用 CSS3 :first-of-type 伪类选择第一个 <p>其父元素的子树中的元素:

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

WORKING DEMO

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

来自MDN :

The :first-of-type CSS pseudo-class represents the first sibling of its type in the list of children of its parent element.

可以引用 my answer 了解更多信息。