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

Question

我有以下CSS：

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

如果按钮没有“禁用”类，我是否有办法让这个悬停效果仅适用于该按钮？

Answer 1

您可以使用negation pseudo-class ：:not(selector)

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

（需要supporting browser。）

Answer 2

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

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

Answer 3

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

为所有没有.disabled class

的元素设置css

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

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

Answer 4

除了此处建议的:not选择器之外，您还可以简单地使用a.button类覆盖disabled的悬停类（如果您支持IE7和8，则可能有用）：

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

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

Simple demo

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/