定位第一级<li>而不是嵌套<li>

Question

我有以下HTML:

<ul>
  <li>A
    <ul>
      <li>subsection</li>
    </ul>
  </li>
  <li>B
    <ul>
      <li>subsection</li>
    </ul>
  </li>
  <li>C
    <ul>
      <li>subsection</li>
    </ul>
  </li>
</ul>

使用jQuery,我如何定位第一级<li>s？

例如,我需要将字体粗体显示为悬停在<li>带有字母A,B和C 的s上,但不要将该字体样式应用于嵌套的<li>s(带有名称子部分).

如果你想使用它,这是一个初始的jsfiddle DEMO.

谢谢.

编辑 -

解:

儿童选择者,这就是答案.

不需要jQuery,这可以使用CSS完成.

这是更新的DEMO

编辑 -这是一个更清晰的演示

谢谢,

Answer 1

有一个<div>带有类的容器,并使用>选择器.让我们说你的容器div的类是"myclass":

.myclass ul li {
   ...this will affect both levels of li.
}

.myclass > ul > li {
   ...this will only affect the first level.
}

.myclass > ul > li > ul > li {
   ...this will only affect the second level.
}

注意:>当用作CSS选择器时,选择器在IE6及以下版本中不起作用.它可以在所有其他浏览器中工作,包括IE7和IE8,当在JQuery中使用时,它适用于jQuery支持的所有浏览器,包括IE6.

Answer 2

你可以这样做:

$('ul > li:not(:has(ul))');

但是最好给你的顶级<ul>一个ID,这样你就可以用一个有效的CSS选择器来定位它:

$('#topUL > li')

Answer 3

儿童选择者,这就是答案.

不需要jQuery,这可以使用CSS完成.li使用选择器定位第一级元素:

ul > li {
    font-weight: bold;
}

然后撤消更深层li元素的样式:

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

这是更新的DEMO.