CSS样式仅“此”元素

Question

我有一个项目清单，将其悬停时应突出显示。我的工作正常如下：

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

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

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

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

Answer 1

您可以欺骗它，但将文本内容包装到其他某个不包装其子节点的节点中http://jsfiddle.net/2CtFW/7/

这避免了级联规则，因为接收规则的元素不包含内部列表text-decoration。最初，我认为这是一种黑客行为，但考虑到您无法设置文本元素的样式，而这正是您在这种情况下想要做的，我认为这是实现您想要的唯一方法。

<ul>
    <li>
        <span>Item1</span>
        <ul>
            <li><span>Item2</span></li>
        </ul>
    </li>
<ul>


li>span:hover
{
    text-decoration: underline
}