我需要一个"don't do it if my class is disabled"类型的CSS选择器

Question

我目前有以下CSS：

a.enabled:hover { background-color: #f9f9f9; border: 1px solid #ddd; }

代码：

<div><a class="enabled" ......>07</a></div>
<div><a class="enabled" ....... >08</a></div>
<div><a class="disabled" >09</a></div>
<div><a class="enabled" ...... >10</a></div>
<div><a class="enabled" .......>11</a></div>

当我把鼠标悬停在一个"已启用"的链接上时，背景颜色就会改变。当我将鼠标悬停在"禁用"链接上时，什么也不会发生。

我想通过删除出现在这么多行(超过200行(上的所有class="enabled"文本来缩小页面的大小。像这样的东西。

之后：

<div><a  ........>07</a></div>
<div><a  ....... >08</a></div>
<div><a class="disabled" >09</a></div>
<div><a  ...... >10</a></div>
<div><a  .......>11</a></div>

有没有一种方法可以用CSS做到这一点？我只是希望悬停不改变背景颜色，如果链接有一个"禁用"状态。

Answer 1

您将使用的选择器是

a:not(.disabled):hover { background-color: #f9f9f9; border: 1px solid #ddd; }

权衡是浏览器兼容性-IE<9不支持:not()。作为一种变通方法，如果您可以定义默认背景颜色：，则可以将覆盖规则与这两个规则一起使用

a, a.disabled:hover { /* Default background and border */ }
a:hover { background-color: #f9f9f9; border: 1px solid #ddd; }

或者只使用现有的.enabled和.disabled解决方案。

Answer 2

为.disalbe:hover添加一个css规则，该规则与的默认颜色相同

a, a.disabled:hover { background-color: red; }
a:hover { background-color: green; }

JsBin 中的演示

Answer 3

尝试使用css :not选择器。

div a:not(.disabled):hover

Answer 4

是否可以将样式应用于所有div a，然后在应用.disabled类时撤消它？

类似的东西

a.disabled:hover { background-color: transparent; border: 1px solid transparent; }

Answer 5

 a.disabled:hover { background-color: red; border: 1px solid #ddd; }

你试过这个吗？或者类似的东西：

a:hover { /* disabled-definitions */ }
a.enabled:hover { background-color: #f9f9f9; border: 1px solid #ddd; }

然后您只在HTML 中使用已启用的类