我需要一个"如果我的类被禁用就不要这样做"的那种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解决方案.