这是我的 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;
}
没有应用样式,怎么了?
谢谢!
最佳答案
#id
的第三个 child 实际上是 <dt>test1</dt>
, 所以选择器不匹配任何东西。
使用 :nth-of-type
会更合适选择器在这里:
dl#id dd:nth-of-type(3)
也可以利用相当严格的 HTML 结构(成对的 <dt>
/<dd>
)并简单地编写 dl#id :nth-child(6)
, 但在这种情况下它毫无意义(浏览器支持 AFAIK 对于两个选择器都是一样的)。
关于CSS:使用 ID 选择第 n 个元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16190848/