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

例如,假设我们有:

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

我想做的是:

.composite 
{
   .something;
   .else
}

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


当前回答

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

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

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

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

其他回答

不幸的是,CSS不像C++、C#或Java等编程语言那样提供“继承”。您不能声明一个CSS类,然后用另一个CSS扩展它。

但是,您可以将多个类应用于标记中的标记。。。在这种情况下,有一组复杂的规则来确定浏览器将应用哪些实际样式。

<span class="styleA styleB"> ... </span>

CSS将根据标记查找可应用的所有样式,并将这些多个规则中的CSS样式组合在一起。

通常,会合并样式,但当出现冲突时,通常会以稍后声明的样式获胜(除非在其中一个样式上指定了!important属性,在这种情况下,将获胜)。此外,直接应用于HTML元素的样式优先于CSS类样式。

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

composite.something, composite.else
{
    blblalba
}

它突然对我奏效了:)

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

/*  ------------------------------------------------------------------------------ */   
/*  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;
}

不,你不能这样做

.composite 
{
   .something;
   .else
}

这不是OO意义上的“类”名称。something和.else只是选择器而已。

但是您可以在一个元素上指定两个类

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

或者你可以研究另一种形式的继承

.foo {
  background-color: white;
  color: black;
}

.bar {
  background-color: inherit;
  color: inherit;
  font-weight: normal;
}
<div class="foo">
  <p class="bar">Hello, world</p>
</div>

其中段落背景颜色和颜色继承自封闭div中的设置,该div为.foo样式。您可能需要检查确切的W3C规范。无论如何,inherit是大多数财产的默认值,但不是所有属性的默认值。

如果您想要比LESS更强大的文本预处理器,请查看PPWizard:

http://dennisbareis.com/ppwizard.htm

警告:该网站确实很难看,学习曲线很小,但它非常适合通过宏构建CSS和HTML代码。我一直不明白为什么更多的网络程序员不使用它。