在另一个选择器中导入CSS选择器样式？ （不是@import）

Question

有没有办法将单个CSS选择器的样式导入另一个CSS选择器并添加到它或从中重写属性。

让我们说：

.original_class{
background:black;
color:white;
}
.overwrite{
@import(.original_class); /* I know this doesn't work */
color:blue;
border:1px solid green;
}

我可以通过重新声明.original_class并分配新值（因为CSS样式从上到下重写）来实现这一点，但这将取代原始CSS类的属性。我想要的是将其属性继承到另一个类而不必再次编写它们（重复）。

Answer 1

不直接，没有。

您可以在HTML中执行以下操作：

<div class="original_class overwrite">...</div>

这将产生相同的效果，但您必须为您希望以这种方式设置的每个元素执行此操作。

还可以选择使用支持继承/混合的CSS预处理器，如SASS。

Answer 2

您可以将.overwrite选择器添加到第一个规则，方法是使用逗号（grouping selectors）将其与现有选择器分开，以便选择器规则变为.original_class, .overwrite：

.original_class,
.overwrite {
background: black;
color: white;
}
.overwrite {
color: blue;
border: 1px solid green;
}

另外，当你写：

  

这将替换原始CSS类的属性

CSS中没有属性和类这样的东西，没有我想的OOP的意图。有规则，选择器规则（选择HTML id，类，元素，属性和其他伪），声明，属性和值。

Answer 3

不幸的是没有。至少没有一个那些花哨的CSS插件的东西，我不会用一英里长的杆子... ...

当然，没有什么可以阻止你在一个元素上有多个类。

Answer 4

如果你愿意稍微绕道而行this可能适合你。