html - 如何用css选择第n个孩子？

Question

鉴于以下 HTML 和 CSS，我想使用nth-child伪类突出显示列表中的第二个元素。我将如何更改以下内容以实现此目的？

HTML

<div id="topdiv">
    <div class="middlediv">
        <div>A</div>
        <div>B</div>
        <div>C</div>
    </div>
</div>

CSS

.topdiv > div:nth-child(n+2) {
    font-weight:bold;
    font-color:red;
}

score 7 · Accepted Answer

#topdiv .middlediv > div:nth-child(2) {
    font-weight:bold;
    color:red;
}

您需要使用#for id 和.for class

只是为了解释n+2将选择第二个元素之后的所有兄弟姐妹。也>将只选择匹配选择器的直接子代。

score 2 · Accepted Answer

您通过选择 ID#并通过选择类.。您可以简单地将nth-child()索引（从零开始）传递给它以选择您需要的元素，在您的情况下 2

#topdiv .middlediv > div:nth-child(2) {
    font-weight:bold;
    color:red;
}

score 1 · Accepted Answer

单程：

#topdiv > .middlediv div:nth-child(2) {
color: olive;
}

.topdiv > div:nth-child(n+2)

不起作用，因为您尝试设置样式的后代 div 不是子代，而是孙代，#topdiv并且您还在.根 div 上使用了 a 而不是#（旨在定位元素 ID）

3 回答 3