有没有一种方法可以将CSS类组合在一起？

Question

有一个快速的问题，主要是由代码解释。这在CSS中是否可行，还是我必须在HTML中实现所有类？

.class1{
    color:red;
}
.class2{
    text-decoration:underline;
}
.class3{

    class1;
    class2;
    border:1px solid green;
}

- Tristanisginger

Answer 1

你可以使用像LESS或SASS这样的CSS预处理器来实现CSS“类继承”。

否则，你的代码示例是无法通过纯CSS实现的。但是，你可以使用逗号将类似的样式添加到多个元素中：

.class1, .class2 {
    /* your styles */
}

- Josh Beam

Answer 2

不可能像这样做。如果一个元素需要具有多个类，请在HTML中指定：

<span class="class1 class2">Test</span>

请注意，可以定义一个选择器来针对具有多个类的元素。 .class1.class2选择器将定位上述示例中的元素，而不会定位在HTML中未指定两个类的元素。例如，如果您希望仅在组合使用它们时覆盖其中1个类的属性，则这很有用。

- Laurent S.

Answer 3

你可以采用一种方法，通过JS自身来实现它。

我建议使用类似JSX的东西，这将简化过程。

你可以在范围内的某个地方设置一个变量，并列出你的类。

const buttonStyle = "class-1 class-2 class-3"

使用JSX应用样式（如果您使用它）

<button id="my-button" class={ buttonStyle } />

使用JQuery应用样式（假设您使用它）

$("#my-button").addClass(buttonStyle)

- Illegal Operator