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
}