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

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>

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

Answer 1

使用子选择器>:

ul > li { font-weight: bold; }

唯一的问题是这在IE6中不起作用.请参阅CSS选择器列表和浏览器支持.

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

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

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