jQuery 目标第一级 <li>s 而不是嵌套的 <li>s
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4830624/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Target first level <li>s and not the nested <li>s
提问by Ricardo Zea
I have the following HTML:
我有以下 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>
With jQuery, how do I target the FIRST level of <li>s?
使用 jQuery，我如何定位<li>s的第一级？
For example, I need to make the font bold on hover to the <li>s with the letters A, B and C, but NOT have that font style applied to the nested <li>s (with the name subsections).
例如，我需要将悬停在<li>带有字母 A、B 和 C的s上的字体设为粗体，但不要将该字体样式应用于嵌套的<li>s（名称为subsections）。
Here's an initial jsfiddle DEMOif you'd like to use it.
如果您想使用它，这里有一个初始的 jsfiddle DEMO。
Thanks.
谢谢。
EDIT--
编辑 -
Solution:
解决方案：
CHILD SELECTORS, that's the answer.
儿童选择器，这就是答案。
No need for jQuery, this can be done using CSS.
不需要 jQuery，这可以使用 CSS 来完成。
Here's the updated DEMO
这是更新的DEMO
EDIT--Here's a more clear demo
编辑 -这是一个更清晰的演示
Thanks,
谢谢，
回答by Spudley
Have a container <div>with a class, and use the >selector. Lets say your container div's class is "myclass":
有一个<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.
}
Note: the >selector does not work in IE6 and below when used as a CSS selector. It does work in all other browsers though, including IE7 and IE8, and when used in JQuery, it works in all browsers supported by jQuery, including IE6.
注意：>当用作 CSS 选择器时，选择器在 IE6 及以下版本中不起作用。但它确实适用于所有其他浏览器，包括 IE7 和 IE8，并且当在 JQuery 中使用时，它适用于 jQuery 支持的所有浏览器，包括 IE6。
回答by user113716
You could do this:
你可以这样做：
$('ul > li:not(:has(ul))');
But it would be better to give your top level <ul>an ID so you can target it with a valid CSS selector:
但是最好给你的顶级<ul>一个 ID，这样你就可以用一个有效的 CSS 选择器来定位它：
$('#topUL > li')
回答by Ricardo Zea
CHILD SELECTORS, that's the answer.
儿童选择器，这就是答案。
No need for jQuery, this can be done using CSS. Target the first-level lielements with a selector:
不需要 jQuery，这可以使用 CSS 来完成。li使用选择器定位第一级元素：
ul > li {
font-weight: bold;
}
And then undo the styling for deeper lielements:
然后撤消更深层次li元素的样式：
ul > li li {
font-weight: normal;
}
Here's the updated DEMO.
这是更新的DEMO。
回答by detaylor
I would set one rule to target all li elements and then another to override this that targets nested li elements.
我会设置一个规则来针对所有 li 元素，然后设置另一个规则来覆盖这个针对嵌套 li 元素的规则。
li{font-weight:bold;}
ul ul li{font-weight:normal;}
Nested li elements would be normal weight and top level would be bold.
嵌套的 li 元素将是正常的权重，顶级将是粗体。
回答by typeof
I don't think your problem has been completely addressed (although there has been some good attempts). Your example problem deals with applying a style to a parent and preventing the child from inheriting the style -- which is a CSS problem.
我认为您的问题还没有完全解决（尽管有一些很好的尝试）。您的示例问题涉及将样式应用于父项并防止子项继承该样式——这是一个 CSS 问题。
You could target the list items by knowing the parent element (as some have noted). Then add a class on hover.
您可以通过了解父元素来定位列表项（正如某些人所指出的）。然后在悬停时添加一个类。
$('div > ul > li').hover(function(){
$(this).addClass('myHover');
},
function(){
$(this).removeClass('myHover');
});
And your CSS would have the class for the parent, and a negating style for the children:
并且您的 CSS 将为父级提供类，并为子级提供否定样式：
.myHover { font-weight: bold; }
.myHover li { font-weight: normal; }
