第一个孩子选择器不能与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*/ 
} 

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伪类表示第一个同级 其在它的父元素的儿童名单型。

哪个术语类型引用HTML元素类型。因此dd:first-of-type在其父代的子树中选择第一个<dd>元素。

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

Answer 2

应该

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

Updated fiddle here.

Answer 3

对于跨浏览器兼容（< = IE8），你甚至可以使用：

dt + dd { 
    display:none; 
} 

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