html - 我可以让我的 CSS 依赖于不存在的类吗？

Question

我有以下CSS：

a.button:hover,
.mini-menu > li > a:hover {
    xxx
    }

有没有一种方法可以使这种悬停效果仅在按钮没有“禁用”类的情况下才对按钮起作用？

Answer 1

您可以使用否定伪类：:not(selector)

a:not(.disabled).button:hover,
.mini-menu > li > a:not(.disabled):hover { ... }

（需要支持的浏览器。）

Answer 2

您可以使用 CSS3:not()选择器，但当然这具有跨浏览器兼容性实现：

a.button:not(.disabled):hover,
.mini-menu > li > a:hover {
    xxx
}

Answer 3

你可以通过 :not(.disabled)选择器来完成。

为所有没有.disabled类的元素设置 css

:not(selector)选择器匹配不是指定元素/选择器的每个元素。

注意：IE8 及更早版本不支持

Answer 4

除了:not这里建议的选择器之外，您还可以简单地为a.buttonwithdisabled类覆盖悬停类（如果您支持 IE7 和 8，可能会很有用）：

a.button:hover,
.mini-menu > li > a:hover {
    xxx
}

a.button.disabled:hover {
   //css to set non-hover style
}

简单的演示

Answer 5

你可以使用:not(.disabled)选择器。

Answer 6

此外:not()- 另一种方法是利用 CSS 特定性并使用更高得分的“禁用”类重置样式。

a.button.disabled:hover,
.disabled.mini-menu > li > a:hover {
   xxx- disabled properties that won't be over ridden by below.
}


a.button:hover,
.mini-menu > li > a:hover {
    xxx
}

工作演示 http://jsfiddle.net/bKyr3/