Question

dd上的第一个子选择器不起作用，为什么？

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

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

demo

Answer 1

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

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

<强> UPDATED DEMO

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

element:first-child代表其父级的第一个孩子，与element匹配。在这个特定的例子中，<dl>元素的第一个子元素是<dt>元素;不是<dl>。

来自 MDN ：

:first-of-type CSS伪类代表的第一个兄弟 其类型在其父元素的子元素列表中。

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

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

Answer 2

对于跨浏览器兼容性（＆lt; = IE8），您甚至可以使用：

dt + dd {
  display:none;
}

演示： http://jsfiddle.net/seemly/N4Jqg/5/

Answer 3

应该是

dd:first-of-type{
    display: none;
}

Updated fiddle here.

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

3 个答案: