CSS,只影响ul的顶级lis？

Question

我有一个嵌套的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 li会影响所有列表元素,包括子元素.有没有办法定位lis,以便样式只适用于顶级的,而不是孩子？

Answer 1

正如其他人所提到的,>选择器只会选择直接的孩子.但是,这在IE 6中不起作用.

如果您需要支持IE 6,您可以向子项ul或lis 添加一个类,并使用它来从顶部删除样式级联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;
}