CSS:使用 ID 选择第 n 个元素？

Question

这是我的 HTML:

<dl id="id">
    <dt>test</dt>
    <dd>whatever</dd>
    <dt>test1</dt>
    <dd>whatever2</dd>
    ....
</dl>

我想选择第三个 dd，但我无法让它工作。这是我尝试过的:

dl#id dd:nth-child(3) {  
     color: yellow;
}

没有应用样式，怎么了？

谢谢!

Answer 1

#id 的第三个 child 实际上是 <dt>test1</dt> , 所以选择器不匹配任何东西。

使用 :nth-of-type 会更合适选择器在这里:

dl#id dd:nth-of-type(3)

也可以利用相当严格的 HTML 结构(成对的 <dt>/<dd> )并简单地编写 dl#id :nth-child(6) , 但在这种情况下它毫无意义(浏览器支持 AFAIK 对于两个选择器都是一样的)。