Css选择器.a.b如何从选择a.b.c中排除它？

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选择器 .a.b 选择两个div

• <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>

什么是选择器，只选择 a.b.disabled 类，只选择 a.b 类？

Answer 1

如何做到的三种方式：

第一个，将样式设置为.a.b，然后为.a.b.disabled删除它们（覆盖）。

.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()选择器有助于：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用:not() css选择器。

.a.b:not(.disabled)

Answer 4

试试这个，

这应该以一个AND禁用

为目标div

.a.disabled {}

这应该以类a AND b

为目标div

.a.b {}