如何用CSS选择第n个孩子？

Question

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

小提琴：http://jsfiddle.net/jeljeljel/DHKj5/

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;
}

Answer 1

Demo

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

您需要将#用于ID，将.用于类

解释n+2只会选择第二个元素之后的所有兄弟姐妹。此外，>将仅选择匹配选择器的直接子项。

Answer 2

您可以通过#选择ID，通过.选择课程。使用nth-child()，您可以简单地将索引（基于零）传递给它以选择您需要的元素，在您的情况下2

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

<强> jsFiddle example

Answer 3

一种方式：

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

http://jsfiddle.net/DHKj5/4/

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

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

更多信息：http://www.w3.org/TR/css3-selectors/#nth-child-pseudo