我有一个列表,其中包含一个元素,当鼠标悬停在该元素上时,它应该突出显示。我的工作正常,如下所示:
li.test:hover
{
text-decoration: underline
}
但是,此列表项包含另一个列表,并且使用上述 CSS 规则,子列表中的所有列表项也都带有下划线。我只想在第一个 li
(实际上悬停在上面的那个)下划线。我确实尝试过使用子选择器,但没有发现任何有用的东西(尽管它可能真的很明显)。
如何只将样式应用于当前元素而不是其子元素?
Jsfiddle:http://jsfiddle.net/Mansfield/2CtFW/
最佳答案
您可以欺骗它,但将您的文本内容包装到其他不包装其子节点的节点中 http://jsfiddle.net/2CtFW/7/
这避免了级联规则,因为内部列表不包含在接收 text-decoration
规则的元素中。最初,我认为这是一个 hack,但考虑到您不能设置文本元素的样式,而这正是您在这种情况下想要做的,我认为这是实现您想要的唯一方法。
<ul>
<li>
<span>Item1</span>
<ul>
<li><span>Item2</span></li>
</ul>
</li>
<ul>
li>span:hover
{
text-decoration: underline
}
关于html - Css 样式只有 "this"元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16022392/