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

例如,假设我们有:

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

我想做的是:

.composite 
{
   .something;
   .else
}

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


当前回答

对于那些对上述(优秀)文章不满意的人,您可以使用编程技能创建一个变量(PHP或任何一个),并让它存储多个类名。

这是我能想出的最好的办法。

<style>
.red { color: red; }
.bold { font-weight: bold; }
</style>

<? define('DANGERTEXT','red bold'); ?>

然后将全局变量应用于所需的元素,而不是类名本身

<span class="<?=DANGERTEXT?>"> Le Champion est Ici </span>

其他回答

这在CSS中是不可能的。

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

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

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

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

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

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

完美的时机:我从这个问题转到了我的电子邮件,找到了一篇关于Less的文章,这是一个Ruby库,除其他外,它还做了以下工作:

由于super看起来就像页脚,但字体不同,所以我将使用Less的类包含技术(他们称之为mixin)来告诉它也包含这些声明:

#super {
  #footer;
  font-family: cursive;
}

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

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

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

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

...

将常用属性放在一起,然后再次指定特定(或覆盖)属性。

/*  ------------------------------------------------------------------------------ */   
/*  Headings */ 
/*  ------------------------------------------------------------------------------ */   
h1, h2, h3, h4
{
    font-family         : myfind-bold;
    color               : #4C4C4C;
    display:inline-block;
    width:900px;
    text-align:left;
    background-image: linear-gradient(0,   #F4F4F4, #FEFEFE);/* IE6 & IE7 */
}

h1  
{
    font-size           : 300%;
    padding             : 45px 40px 45px 0px;
}

h2
{
    font-size           : 200%;
    padding             : 30px 25px 30px 0px;
}