Question

说我有：

<ul class="menu">
 <li>One</li>
  <ul class="submenu">
   <li>Apple</li>
   <li>Orange</li>
  </ul>
 <li>Two</li>
  <ul class="submenu">
   <li>Pear</li>
   <li>Banana</li>
  </ul>
</ul>

有没有办法只用CSS选择顶级<ul>元素的第一个子元素（在本例中为“One”和“Two”）？

Answer 1

使用子选择器>：

ul > li { font-weight: bold; }

唯一的问题是这在IE6中不起作用。请参阅此CSS selectors and browser support列表。

如果您需要支持该浏览器，则必须执行此类操作。

ul li { font-weight: bold; }
ul li li { font-weight: normal; }

在某些情况下这是相对简单的，而在其他情况下完全不可行。如果您发现自己处于困境，可能需要设置一些课程以使其更容易。

Answer 2

ul > li

但它在IE6中不起作用。这是IE版本中一个很好的选择器支持列表： http://www.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/

明确定位它们的最简单方法是给它们一个单独的类名。

Answer 3

好吧，如果您不担心使用jQuery，可以通过使用jQuery css支持来解决IE6兼容性问题。

Answer 4

你的标记错了。它应该是：

<ul class="menu">
 <li>One
  <ul class="submenu">
   <li>Apple</li>
   <li>Orange</li>
  </ul>
</li>

嵌套列表出现在前面的li元素

中

选择<ul>元素的所有直接子元素</ul>

4 个答案: