css - 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实际上是<dt>test1</dt>，所以选择器不匹配任何东西。

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

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

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

Answer 2

你也可以用 jquery 来做：

$("dl#id dd")

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

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

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

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

我希望这回答了你的问题