是否可以创建一个从另一个CSS类(或多个)“继承”的CSS类。

例如,假设我们有:

.something { display:inline }
.else      { background:red }

我想做的是:

.composite 
{
   .something;
   .else
}

其中“.composite”类将显示为内联,并具有红色背景


当前回答

看看CSS合成:https://bambielli.com/til/2017-08-11-css-modules-composes/

根据他们的说法:

.serif-font {
    font-family: Georgia, serif;
}

.display {
    composes: serif-font;
    font-size: 30px;
    line-height: 35px;
}

我在我的反应项目中使用它。

其他回答

一个元素可以包含多个类:

.classOne { font-weight: bold; }
.classTwo { font-famiy:  verdana; }

<div class="classOne classTwo">
  <p>I'm bold and verdana.</p>
</div>

不幸的是,这几乎和你会得到的一样接近。我希望有一天能看到这个特性以及类别名。

在特定情况下,可以执行“软”继承:

.composite
{
display:inherit;
background:inherit;
}

.something { display:inline }
.else      { background:red }

这仅在将.composite类添加到子元素时有效。它是“软”继承,因为任何未在.composite中指定的值都不会明显继承。请记住,简单地写“inline”和“red”而不是“inherit”仍然会减少字符数。

以下是财产列表,以及它们是否自动执行此操作:https://www.w3.org/TR/CSS21/propidx.html

看看CSS合成:https://bambielli.com/til/2017-08-11-css-modules-composes/

根据他们的说法:

.serif-font {
    font-family: Georgia, serif;
}

.display {
    composes: serif-font;
    font-size: 30px;
    line-height: 35px;
}

我在我的反应项目中使用它。

Less和Sass是以有价值的方式扩展CSS语言的CSS预处理器。他们提供的众多改进中只有一项是您正在寻找的选项。Less有一些非常好的答案,我将添加Sass解决方案。

Sass具有扩展选项,允许一个类完全扩展到另一个类。有关扩展的更多信息,请参阅本文

您可以向单个DOM元素添加多个类,例如。

<div class="firstClass secondClass thirdclass fourthclass"></div>

后面的类(或更具体的类)中给出的规则将覆盖。所以这个例子中的第四类占了上风。

继承不是CSS标准的一部分。