CSS当有2个类时，弃用单个类

Question

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

喜欢 - <div class="A B">

我想要的是，如果有.A.B {}，则会弃用.A{}和.B{}样式，只使用.A.B{}样式。

有可能吗？

Answer 1

如果某个元素具有类A，则它具有类A，并且您无法将其关闭＆＃34;通过添加另一个类B。但我可以想到三种方法：

＆＃34;正常＆＃34;方法

在.A.B规则中定义属性，以覆盖.A或.B规则中的属性。

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

或者，如果你想＆＃34;撤消＆＃34;当两个类都存在时，单个.A和.B规则，则：

.A.B { color: initial; }

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

使用all

有一个all速记属性，它引用所有CSS属性。你可能不应该使用它，因为它是一种大锤，

.A.B { all: initial; }

这会将.A.B元素上的所有属性（包括在单个.A和.B规则中指定的属性）重置为其初始值。 all属性的其他值包括inherit和unset。有关详细信息，请参阅documentation。

使用:not

另一种可能性是重写您的A和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 */ }

Answer 2

在css中，最后一个优先级 - 这就是它被称为级联样式表的原因。例外情况是使用!important标志或前一个选择器比后者更具体。在您的情况下，.A.B{}更具体，因此会自动覆盖.A{}和.B{}中的任何相同属性。如果您希望.B{}中的某个属性覆盖.B{}中的某个属性，反之亦然，那么您只需确保它属于最后一个属性。