如何用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

方式一：

#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

Answer 3

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

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

jsFiddle example