是否可以创建一个从另一个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;
}

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

其他回答

如果通过php对.css文件进行预处理,则可以实现所需的效果。...

$something='color:red;'
$else='display:inline;';
echo '.something {'. $something .'}';
echo '.else {'. $something .'}';
echo '.somethingelse {'. $something  .$else '}';

...

而直接继承是不可能的。

可以为父标记使用类(或id),然后使用CSS组合符改变子标记的继承行为。

p.test{背景色:rgba(55,55,55,0.1);}p.test>span{背景色:rgba(55,55,55,0.1);}p.test>span>span{背景色:rgba(55,55,55,0.1);}p.test>span>span>span{背景色:rgba(55,55,55,0.1);}p.test>span>span>span{背景色:rgba(55,55,55,0.1);}p.test/span>span>span>span{背景色:rgba(55,55,55,0.1);}p.test/span>span>span>span>span{背景色:rgba(55,55,55,0.1);}p.test>span>span>/span>span>span{背景色:rgba(55,55,55,0.1);}p.test>span>span>span>span>span>span>span{背景色:rgba(55,55,55,0.1);}<p class=“test”><span>一种可能的<span>解决方案<span>是使用<span>多个<span>嵌套<span>标记</span></span><span></span></span></p>

我不建议像示例那样使用这么多跨度,但这只是概念的证明。当试图以这种方式应用CSS时,仍然会出现许多错误。(例如,更改文本装饰类型)。

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

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

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

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

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

我也在疯狂地寻找它,我只是通过尝试不同的东西来找到它:P。。。你可以这样做:

composite.something, composite.else
{
    blblalba
}

它突然对我奏效了:)

CSS并没有真正做到你所要求的。若你们想在写规则的时候考虑到这个复合的想法,你们可能想看看指南针。这是一个样式表框架,看起来类似于前面提到的Less。

它让你做调酒和所有的好生意。