CSS，隻影響ul的頂部？

Question

我有一個嵌套的UL導航列表，其中ul包含在一些其他li元素中。這裏的了標記：

<ul class="navigation"> 
    <li><a href="#">No Chidren</a></li> 
    <li><a href="#">With Chilren</a> 
     <ul> 
     <li><a href="#">Child 1</a></li> 
     <li><a href="#">Child 2</a></li> 
     </ul> 
    </li> 
</ul> 

我試着用下面的一些CSS聲明的造型吧：

.navigation { 
//stylings 
} 

.navigation li{ 
//stylings 
} 

.navigation li a{ 
//stylings 
} 

.navigation li a:hover{ 
//stylings 
} 

但李的.navigation影響所有列表元素，其中包括兒童。有沒有一種方法來定位lis，以便樣式只應用於頂層的樣式，而不是兒童？

Answer 1

正如其他人所提到的，>選擇將僅選擇直接孩子。但是，這個doesn't work in IE 6。

如果需要支持IE 6，你可以添加一個類孩子ul S或li S，並用它來除去從頂部li造型級聯：

<ul class="navigation"> 
    <li><a href="#">No Chidren</a></li> 
    <li><a href="#">With Chilren</a> 
     <ul class="level1"> 
     <li><a href="#">Child 1</a></li> 
     <li><a href="#">Child 2</a></li> 
     </ul> 
    </li> 
</ul> 

-

.navigation li{ 
    background: url(bg.png); 
} 

.navigation .level1 li{ 
    background: none; 
} 

Answer 2

與此類似，「>」規定，李一定是的.navigation

.navigation { 
//stylings 
} 

.navigation > li{ 
//stylings 
} 

.navigation > li a{ 
//stylings 
} 

.navigation > li a:hover{ 
//stylings 
} 

Answer 3

直接孩子是的，這是可能的子選擇。

.navigation>li>a{ 
//stylings 
} 

上面的代碼將影響「沒有孩子」和「與孩子」鏈接，但不會影響「孩子1」元素。

這裏是工作示例：http://jsfiddle.net/VuNwX/

在這裏你可以閱讀更多關於選擇：http://css.maxdesign.com.au/selectutorial/index.htm