This question already has an answer here:
Why doesn't this CSS :first-child selector work?

(1个答案)


6年前关闭。




dd上的第一个子选择器不起作用,为什么?
<dl>
    <dt>definition term</dt>
    <dd>description</dd>
    <dd>description</dd>
    <dd>description</dd>
</dl>

dd:first-child{
    /*styling here not work*/
}

demo

最佳答案

您应该改为使用 :first-of-type 伪类。

dd:first-of-type {
    background-color: gold;
}

UPDATED DEMO

这是因为<dd>不是其父代的第一个孩子。

element:first-child 表示其父级的第一个孩子,与element相匹配。在这种情况下,<dl>元素的第一个子元素是<dt>元素;不是<dl>

MDN 中:



其中的“类型”一词是指HTML元素的类型。因此,dd:first-of-type选择其父级的子级树中的第一个<dd>元素。

或者,在这种特殊情况下,您可以通过使用adjacent sibling selector作为<dd>来选择第一个dt + dd元素。 (Demo)

10-05 20:47
查看更多