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

有一个 div，它有 2 个类名。

like - <div class="A B">

我想要的是如果有.A.B {}，它将被弃用.A{} AND .B{}样式，仅使用.A.B{} style.

是否可以？

如果一个元素有类A，那么它有类A，并且您不能通过添加另一个类来“关闭它”B。但我可以想到三种方法：

“正常”方法

定义属性.A.B覆盖属性的规则.A or .B rules.

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

或者，如果您想“撤消”该个人.A and .B当两个类都存在时规则，然后：

.A.B { color: initial; }

initial是一个特殊值，基本上意味着默认值或继承属性的继承值。

Using all

有一个allproperty 是指所有 CSS 属性的简写。你可能不应该使用这个，因为它有点像一把大锤，

.A.B { all: initial; }

这将重置所有属性.A.B元素，包括在个别中指定的元素.A and .B规则，为其初始值。其他值all财产包括inherit and unset。请参阅文档了解详情。

Using :not

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

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