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
}

Css样式只有“this”元素

1 个答案: