css - 选择 元素的所有直接子元素

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>

有没有办法只选择顶级的第一个 child <ul>仅使用 CSS 的元素(在本例中为“一”和“二”)？

Answer 1

使用子选择器 >:

ul > li { font-weight: bold; }

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

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

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

这在某些情况下相对简单，而在其他情况下则完全行不通。如果您发现自己处境困难，您可能需要插入一些类(class)以使其变得更容易。