html - 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 li 会影响所有列表元素，包括子元素。有没有一种方法可以定位 lis，以便样式仅应用于顶级样式，而不应用于子项？

Answer 1

正如其他人所提到的，> 选择器只会选择直接子级。然而，这doesn't work in IE 6 .

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