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

我有以下的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>的第一级？

例如，我需要使用字母A，B和Chover在<li>上的字体粗体，但是没有将该字体样式应用于嵌套的<li> s（带有名称小节 ）。

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

谢谢。

编辑 –

解：

儿童select ，这就是答案。

不需要jQuery，这可以使用CSS来完成。

这里是更新的DEMO

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

谢谢，

Answer 1

有一个容器<div>和一个类，并使用>select器。 让我们说你的容器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. } 

注意：当用作CSSselect器时， >select器在IE6及以下版本中不起作用。 它在所有其他浏览器中都能正常工作，包括IE7和IE8，当在JQuery中使用时，它可以在jQuery支持的所有浏览器（包括IE6）中运行。

Answer 2

你可以这样做：

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

但是最好给你的顶级<ul>一个ID，这样你可以用一个有效的CSSselect器来定位它：

 $('#topUL > li') 

Answer 3

儿童select ，这就是答案。

不需要jQuery，这可以使用CSS来完成。 使用select器来定位第一级li元素：

 ul > li { font-weight: bold; } 

然后撤消更深的元素的造型：

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

这里是更新的DEMO 。

Answer 4

我会设置一个规则来定位所有的li元素，然后另一个覆盖这个目标嵌套li元素。

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

嵌套李元素将是正常的重量和顶级将大胆。

Answer 5

我不认为你的问题已经完全解决了（虽然有一些很好的尝试）。 您的示例问题涉及将样式应用于父级，并阻止子级inheritance样式 – 这是一个CSS问题。

你可以通过知道父元素（如一些已经注意到的）来定位列表项目。 然后在hover上添加一个类。

 $('div > ul > li').hover(function(){ $(this).addClass('myHover'); }, function(){ $(this).removeClass('myHover'); }); 

而你的CSS将会有父类的类，而对于孩子来说则是一种否定的风格：

 .myHover { font-weight: bold; } .myHover li { font-weight: normal; }