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

Question

I have inherited some markup very similar to the html below. 我继承了一些与下面的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>

I want to select both elements individually. 我想分别选择两个元素。

css selector .ab selects both divs css选择器.ab选择两个div

What is the selector to select only class abdisabled and only class ab ? 选择仅禁用等级和仅选择等级ab的选择器是什么？

Answer 1

Three ways how to do it: 三种方法：

The first one, set styles to .ab and them remove them (override) for .abdisabled . 第一个，将样式设置为.ab ，然后将其删除（覆盖）为.abdisabled 。

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

The second way, use the attr selector. 第二种方法，使用attr选择器。

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

Next, you can use :not selector, but support since IE9. 接下来，您可以使用:not选择器，但从IE9开始支持。

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

Answer 2

The :not() selector will help: :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

Try this, 尝试这个，

this should target div with class a AND disabled 这应该针对A类AND已禁用的div

.a.disabled {}

this should target div with class a AND b 这应该针对a和b类的div

.a.b {}