我需要“如果我的班级被禁用，请勿这样做” 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

默认颜色相同

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

为 a.disalbe:hover 添加一条 css 规则，其颜色与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 中使用启用的类