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