第一个子选择器不能与dd一起使用

Question

dd上的第一个子选择器不工作,为什么？

<dl>
    <dt>definition term</dt>
    <dd>description</dd>
    <dd>description</dd>
    <dd>description</dd>
</dl>

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

演示

Answer 1

你应该使用:first-of-type伪类.

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

更新的演示.

那是因为<dd>它不是其父母的第一个孩子.

element:first-child表示其父级的第一个子级,匹配element.在这个特定的例子中,<dl>元素的第一个子元素是一个<dt>元素; 不是<dl>.

来自MDN:

在:first-of-typeCSS伪类代表第一个同级其类型在它的父元素的孩子的名单.

其中类型的术语是指HTML元素类型.因此,dd:first-of-type选择<dd>其父元素的子树中的第一个元素.

或者,在这种特殊情况下,您可以<dd>使用相邻的兄弟选择器选择第一个元素:dt + dd.(演示).