第一個孩子選擇器不能與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/