css - 仅当链接没有“文件夹”类时，如何进行悬停？

Question

我有以下内容：

<a class="folder"><span>Background</span></a>

和以下CSS：

        ul.arbo li > a:hover span,
        ul.arbo li > a.current span {
            background: #999999;
        }

如果链接具有文件夹类，我如何修改 CSS 使其不适用。换句话说，它不适用于上述 HTML

score 4 · Accepted Answer

您可以在css中使用否定伪类选择器:not，如下所示：

:not(.folder) {

}

请参阅工作演示（由 insertusernamehere 提供）。

score 2 · Accepted Answer

CSS3 有:not()选择器，您可以将其添加到您的 CSS 中（或者您可以使用 jQuery 来执行此操作，无论哪种方式）。请注意，这仅适用于较新的浏览器。

:not(.folder)

在你的例子中：

ul.arbo li > a:not(.folder):hover span,
ul.arbo li > a:not(.folder).current span { }

score 0 · Accepted Answer

你不需要 JavaScript 或 jQuery，你也可以在没有 CSS3 的情况下做到这一点（这可能与你计划支持的浏览器有关）。

只需添加另一条规则以防止背景在某些元素上发生变化，如下所示：

ul.arbo li > a.folder:hover span
{
    background: inherit;   
}

score 0 · Accepted Answer

:not(.folder) {

}

是一个很好的解决方案。不要忘记检查你想要什么浏览器也可以工作！

:not 选择器是 CSS3 选择器，并非所有浏览器都支持它...例如 IE8 和更早版本不支持 :not 选择器。

4 回答 4