CSS当有2个类时，不推荐使用单个类 [英] CSS Deprecate single class when there are 2 classes

问题描述

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

There is a div, and it has 2 class names.

like - < div class =AB> code>

like - <div class="A B">

我想要的是，如果有 .AB {} .A {} AND .B {} 样式，仅使用 .AB {} style。

What I want is that if there are .A.B {}, the it will deprecated .A{} AND .B{} styles, only use .A.B{} style.

有可能吗？

推荐答案

code> A ，那么它有类 A ，你不能通过添加另一个类 B 。但我可以想出三种方法：

If an element has class A, then it has class A, and you can't "turn that off" by adding another class B. But I can think of three approaches:

定义 .AB 规则覆盖 .A 或 .B 规则中的属性。

Define properties in an .A.B rule that override the properties in the .A or .B rules.

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

或者，如果要撤消个人 .A 和 .B 规则，则：

Or, if you want to "undo" the individual .A and .B rules when both classes are present, then:

.A.B { color: initial; }

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

initial is a special value which means, basically, the default value, or the inherited value for inherited properties.

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

There is an all shorthand property which refers to all CSS properties. You should probably not use this, because it's sort of a sledgehammer,

.A.B { all: initial; }

这将重置 .AB 元素，包括在个别 .A 和 .B 规则中指定的规则，以其初始值。 all 属性的其他值包括 inherit 和 unset 。有关详情，请参阅文档。

This will reset all properties on .A.B elements, including ones that were specified in individual .A and .B rules, to their initial values. Other values for the all property include inherit and unset. See the documentation for details.

另一种可能性是重写 A ：和和和规则排除两者都一起指定的情况： 。但是，这也是一个钝刀，你可以削减自己，它不会很好地扩展到更多的课程。

Another possibility is to rewrite your A and B rules to exclude the case where both are specified together, by using :not. However, this is also a bit of a blunt knife that you may cut yourself with, and it won't scale that well to more classes.

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

这篇关于CSS当有2个类时，不推荐使用单个类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！