Question

我有一个关于通过另一个CSS类将样式应用于元素的问题。更具体地说，让我们看一下以下内容。我有div：

<div class="main"></div>

有一些风格：

.main { 
  background: red;
  display: inline;
  /* some other styles */
}

我希望将.another类应用于div，但是通过其.main CSS。

.main {
  background: red;
  display: inline;
  .another
}

.another {
  width: 50px;
  height: 100px;
}

我认为需要一个预处理器（SASS，指南针等），但如果有可能，有人可以提出建议吗？

由于

Answer 1

不需要预处理器，您可以使用.class.another对类进行分组，这与css预处理器的作用相同。

您可以在html中添加多个类，例如<div class="main another and-other">...</div>。在css中，您可以只对选择器进行分组，内联顺序无关紧要，但建议先使用最常用的类（main），然后再添加更多特定的类。但是从上到下的顺序很重要，选择器在文件中较低，更重要的是。

我已从您的代码中创建了a jsfiddle，请查看。我添加了背景颜色，因此您可以看到差异，因为宽度和高度不适用于内联元素。

Answer 2

您可以为该div分配多个类。所以你可以这样写，并可以申请上课。

<div class="main another"></div>

Answer 3

您可以合并两种样式：

.main.another {
  background: red;
  display: inline;
  width: 50px;
  height: 100px;
}

如何通过其他CSS将CSS样式添加到元素

3 个答案: