:第一个子CSS选择器未定位正确的元素

Question

我的网站有以下HTML

<article>
    <p>Header</p>
    <p>Some content</p>
</article>

我希望'标题'是大胆的.关于CSS选择器,我已经按照W3Schools的例子进行了说明

:first-child - 选择<p>作为其父级的第一个子元素的每个元素

我的CSS是

article:first-child {
    font-weight:bold;
} 

问题是,我的第一个元素(the <p>)不是粗体.

我做错了什么？

Answer 1

你应该使用article > :first-child.这称为直接后代选择器(AKA 子选择器):

article > :first-child {
    font-weight: bold;
} 

article:first-child目标article元素是他们父母的第一个孩子.虽然article > :first-child将针对的第一个子元素article.

另请注意,使用后代选择器 article :first-child而不是子选择器(article > :first-child)可能会导致麻烦,因为它将选择其父级的所有第一个元素作为后代article.

您可能还想考虑article > p:first-of-type将第一个<p>元素作为目标的子元素article.

article > p:first-of-type {
    font-weight: bold;
}