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

【问题标题】：Selecting all direct children of a <ul> element选择 <ul> 元素的所有直接子元素
【发布时间】：2014-10-21 11:42:57
【问题描述】：

说我有：

<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> 元素（在本例中为“一”和“二”）的第一个子元素？

【问题讨论】：

标签： css css-selectors

【解决方案1】：

使用子选择器>：

ul > li { font-weight: bold; }

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

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

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

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

【讨论】：

这不也选择水果吗？我希望它只选择“一”和“二”。如果我想具体一点，也许我必须指定一些类。
@soliah，根据提出的问题，cletus 的回答是正确的。与往常一样，亲自测试并查看它是否满足您的需求。

【解决方案2】：

ul > li

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

您的标记错误。应该是：

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

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

【讨论】：