html - CSS样式只有“this”元素

Question

我有一个包含一个项目的列表，当悬停在该项目上时，它应该突出显示。我的工作正常如下：

li.test:hover
{
   text-decoration: underline
}

但是，此列表项包含另一个列表，并且使用上述 CSS 规则，子列表中的所有列表项也都带有下划线。我只希望第一个li（实际上悬停在上面的那个）下划线。我确实尝试过使用子选择器，但我没有找到任何有效的方法（尽管它可能真的很明显）。

如何将样式仅应用于当前元素而不应用于其子元素？

jsfiddle：http: //jsfiddle.net/Mansfield/2CtFW/

Answer 1

您可以欺骗它，但将您的文本内容包装到其他不包装其子节点的节点中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
}