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