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的第3个孩子实际上是<dt>test1</dt>，因此选择器与任何内容都不匹配。

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

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

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

Answer 2

您也可以使用jquery：

$("dl#id dd")

这会给你dl中的所有dd。 使用索引，您可以访问第n个元素 对于第三个，这将是：

$("dl#id dd").eq(2)

然后您可以添加样式属性：

$("dl#id dd").eq(2).css("color", "yellow")

我希望这能回答你的问题