5

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

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

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

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

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

4

1 回答 1

3

您可以欺骗它,但将您的文本内容包装到其他不包装其子节点的节点中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
}
于 2013-04-15T18:40:33.970 回答