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

例如,假设我们有:

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

我想做的是:

.composite 
{
   .something;
   .else
}

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


当前回答

您可以使用相反的方法来实现相同的结果-从复合开始,然后使用unset关键字删除样式。例如,如果从以下示例组成开始:

.composite {
    color: red;
    margin-left: 50px;
    background-color: green
}

然后可以增加选择器的特异性,以使用unset选择性地删除样式:

.composite.no-color {
    color: unset
}

.composite.no-margin-left {
    margin-left: unset
}

.composite.no-background-color {
    background-color: unset
}

这里有一个JSFiddle演示了这种方法。

这种方法的一个好处是,由于复合选择器的特异性高于复合选择器本身,因此不需要所有类的组合来实现多个组合的预期结果:

/* Multi-unset compound selector combinations, such as the one that follows, ARE NOT NECESSARY because of the higher specificity of each individual compound selectors listed above. This keeps things simple. */
.composite.no-background-color.no-color.no-margin-left {
    background-color: unset;
    color: unset;
    margin-left: unset
}

此外,在96%的未设置关键字支持率下,浏览器覆盖率非常高。

其他回答

有一些类似LESS的工具,它允许您在类似于所描述的更高抽象级别上编写CSS。

更少的人称这些为“混合”

而不是

/* CSS */
#header {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#footer {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

你可以说

/* LESS */
.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}

您可以使用相反的方法来实现相同的结果-从复合开始,然后使用unset关键字删除样式。例如,如果从以下示例组成开始:

.composite {
    color: red;
    margin-left: 50px;
    background-color: green
}

然后可以增加选择器的特异性,以使用unset选择性地删除样式:

.composite.no-color {
    color: unset
}

.composite.no-margin-left {
    margin-left: unset
}

.composite.no-background-color {
    background-color: unset
}

这里有一个JSFiddle演示了这种方法。

这种方法的一个好处是,由于复合选择器的特异性高于复合选择器本身,因此不需要所有类的组合来实现多个组合的预期结果:

/* Multi-unset compound selector combinations, such as the one that follows, ARE NOT NECESSARY because of the higher specificity of each individual compound selectors listed above. This keeps things simple. */
.composite.no-background-color.no-color.no-margin-left {
    background-color: unset;
    color: unset;
    margin-left: unset
}

此外,在96%的未设置关键字支持率下,浏览器覆盖率非常高。

事实上,你所要求的是存在的——但它是作为附加模块完成的。查看有关.NET中更好的CSS的示例。

查看Larsenal关于使用LESS的回答,了解这些附加组件的功能。

这在CSS中是不可能的。

CSS中唯一支持的是比另一条规则更具体:

span { display:inline }
span.myclass { background: red }

类为“myclass”的span将同时具有这两个财产。

另一种方法是指定两个类:

<div class="something else">...</div>

“else”的样式将覆盖(或添加)“something”的样式

在Css文件中:

p.Title 
{
  font-family: Arial;
  font-size: 16px;
}

p.SubTitle p.Title
{
   font-size: 12px;
}