This question already has an answer here:
Why doesn't this CSS :first-child selector work?
(1个答案)
6年前关闭。
dd上的第一个子选择器不起作用,为什么?
demo
UPDATED DEMO 。
这是因为
在 MDN 中:
其中的“类型”一词是指HTML元素的类型。因此,
或者,在这种特殊情况下,您可以通过使用adjacent sibling selector作为
(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) 。