CSS选择器.ab我如何从选择abc中排除它？

Question

我继承了一些与下面的html非常相似的标记。

<div class="a b">how_can_i_select_ab_only</div> 
<div class="a b disabled">how_can_i_select_ab_and_disabled_only</div>

我想分别选择两个元素。

css选择器.ab选择两个div

• <div class="ab">how_can_i_select_ab_only</div>
• <div class="ab disabled">how_can_i_select_ab_and_disabled_only</div>

选择仅禁用等级和仅选择等级ab的选择器是什么？

Answer 1

三种方法：

第一个，将样式设置为.ab ，然后将其删除（覆盖）为.abdisabled 。

.a.b {color: red;}
.a.b.disabled {color: grey}

https://jsfiddle.net/p84s61gp/

第二种方法，使用attr选择器。

[class='a b'] {color: red}

https://jsfiddle.net/p84s61gp/1/

接下来，您可以使用:not选择器，但从IE9开始支持。

.a.b:not(.disabled) {color: red}

https://jsfiddle.net/p84s61gp/2/

Answer 2

:not()选择器将帮助：

 .ab:not(.disabled) { color: red; } 

 <div class="ab">how_can_i_select_ab_only</div> <div class="ab disabled">how_can_i_select_ab_and_disabled_only</div> 

Answer 3

使用:not() CSS选择器。

.ab:not(.disabled)

Answer 4

尝试这个，

这应该针对A类AND已禁用的div

.a.disabled {}

这应该针对a和b类的div

.a.b {}