我有以下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和C的<li>
s时将字体加粗,但不需要将该字体样式应用于嵌套的<li>
s(名称为 * subscartions *)。
如果您想使用它,这里有一个初始的jsfiddle DEMO。
谢谢。
编辑--
解决方案:
儿童选择器,这就是答案。
不需要jQuery,这可以使用CSS完成。
这是更新后的DEMO
编辑--这里有一个more clear demo
谢谢你,
7条答案
按热度按时间cgfeq70w1#
有一个包含类的容器
<div>
,使用>
选择器,假设容器div的类是“myclass”:注:
>
选择器在IE6及以下版本中作为CSS选择器使用时不起作用,但在所有其他浏览器中都起作用,包括IE7和IE8,在JQuery中使用时,它在jQuery支持的所有浏览器中都起作用,包括IE6。zujrkrfu2#
你可以这样做:
但是最好给予顶层的
<ul>
一个ID,这样就可以使用有效的CSS选择器来定位它:m0rkklqb3#
儿童选择器,这就是答案。
不需要jQuery,使用CSS就可以完成。使用选择器定位第一级
li
元素:然后撤消更深
li
元素的样式:这是更新后的DEMO。
kkih6yb84#
我将设置一个规则来针对所有li元素,然后设置另一个规则来覆盖针对嵌套li元素的规则。
嵌套的li元素将是正常的重量和顶级将是粗体。
7jmck4yq5#
我认为您的问题还没有完全解决(尽管已经有了一些很好的尝试),您的示例问题涉及将样式应用到父对象并防止子对象继承样式--这是一个CSS问题。
您可以通过了解父元素来定位列表项(正如一些人所指出的),然后在hover上添加一个类。
你的CSS应该有一个父类的类,和一个子类的否定样式:
lymnna716#
下面是用户@Spudley的答案的扩展版本--带有一个片段。
可能会保存一些人的时间。
9avjhtql7#
这可以通过jQuery或CSS3使用
:not()
选择器检查列表的父列表来完成。要防止CSS属性继承,您可以使用
<span>
或<div>
Package 项目的内容。注意,这个方法只有在元素直接嵌套的情况下才有效(即使用子组合子(
>
)),否则:not()
将总是匹配随机祖先。