当有两个类时，CSS不推荐使用单个类

有一个div，它有两个类名

比如-

我想要的是，如果存在

.A.B{}

，它将弃用

.A{}

和

.B{}

样式，只使用

.A.B{}

样式

---

有可能吗？

在css中，最后一个优先-这就是为什么它被称为级联样式表。例外情况是如果

！重要信息

使用标志，或者如果前一个选择器比后一个选择器更具体。在您的例子中，

.A.B{}

更具体，因此它将自动覆盖

.A{}

和

.B{}

中的任何相同属性。如果你想让

.B{}

中的属性覆盖

.B{}

中的属性，或者反过来覆盖

.B{}

中的属性，你只需要确保它排在最后。

如果一个元素有class

A

，那么它就有class

A

，你不能通过添加另一个class

B

来“关闭它”。但我可以想到三种方法：

“正常”方法 在

.A.B

规则中定义属性，以覆盖

.A

或

.B

规则中的属性

.A   { color: blue;  }
.B   { color: green; }
.A.B { color: red;   }

或者，如果要在两个类都存在时“撤消”单个

.A

和

.B

规则，则：

.A.B { color: initial; }

是一个特殊值，基本上是指默认值或继承属性的继承值

使用

all

有一个

all

速记属性，它引用所有CSS属性。你可能不应该用这个，因为它有点像一把大锤

.A.B { all: initial; }

这将把

.A.B

元素上的所有属性（包括在单个

.A

和

.B

规则中指定的属性）重置为初始值。

all

属性的其他值包括

inherit

和

unset

。有关详细信息，请参阅

使用

：不使用

另一种可能是使用
：not
重写
A
和
B
规则，以排除两者同时指定的情况。然而，这也是一把钝刀，你可能会用它割伤自己，而且它不能很好地扩展到更多的类

.A:not(.B) { /* rules for A by itself */  }
.B:not(.A) { /* rules for B by itself */  }
.A.B       { /* rules for both A and B */ }

您只能在希望覆盖
.a
的情况下使用
.a.b
。添加第二个类的原因通常是重写第一个类。或者制作一个组合，这
.a.b
已经做到了。请重新表述你的问题，我不明白你想说什么，“我想要的是，如果有.a.b{}，它将被弃用。a{}和.b{}样式，只使用.a.b{}样式。”这个术语“弃用”在这里有点混乱。我建议改为“override”。.A.B出现在何处都无关紧要，因为无论哪种方式，它都比每个单独的类选择器更具体。@BoltClock感谢您发现了这个错误。我已经相应地编辑了我的答案。初始值可以在“正常”方法中与特定属性一起使用，尽管它与all属性具有相同的compat问题。