無序列表的CSS第一孩子僞類（引導程序）

Question

我想在無序列表的第一個子列表項上呈現背景顏色。

HTML結構如下

<div class="nav-collapse"> 
    <ul class="nav"> 
     <li><a href="#">test 1</a></li> 
     <li><a href="#">test 2</a></li> 
     <li><a href="#">test 3</a></li> 
    </ul> 
</div> 

，並應用我做

.nav-collapse > .nav:first-child { 
    background-color: orange; 
} 

它呈現橙色背景到所有列表項的第一個子元素的背景顏色。 我玩過很小的變化，但它沒有區別。

.nav-collapse > ul.nav:first-child 
.nav-collapse > ul:first-child 

Here is the Demo

Answer 1

使用以下命令：

.nav > li:first-child { 
    background-color: orange; 
} 

Working jsFiddle here

你試圖樣式第一.nav項目 - 其中只有一個。只需將其更改爲li的樣式，即.nav的直接子代。

如果您想更具體的使用方法：

.nav-collapse > .nav > li:first-child { 
    background-color: orange; 
} 

Answer 2

你可以做到這一點在許多方面，試試這個太

ul.nav > li:first-child { 
    background-color: orange; 
}