css - 一个CSS类继承一个或者多个其他类?

  显示原文与译文双语对照的内容

我觉得愚蠢的web程序员这么长时间,不知道这个问题的答案,我希望它是可能的,我只是不知道,而不是我认为答案( 这是不可能的) 。

我的问题是是否可以创建一个CSS类,"继承"类来自另一个CSS类( 或者不止一个) 。

例如假设我们有:


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

我想做的是:


.composite 
{
. something;
. else
}

".composite" 类同时显示内联和红色背景

时间:

有类似 LESS的工具,它允许你在更高层次的抽象中编写 CSS,类似于你所描述的。

LESS 调用这些"mixin""

代替


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

你可以将多个类添加到单个DOM元素,e.g.


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

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

不,你不能像这样做


.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>

段落的突出显示和颜色继承自 .foo 样式的封闭div中的设置。 你可能需要检查精确的W3C规范。 inherit 是大多数属性的默认值,但不是所有属性。

元素可以采用多个类:


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

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

这大约是你要得到的最接近的距离。 我希望看到这个特性,还有 class-aliases 。

将你的公共属性保持在一起并再次指定特定的( 或者替代) 属性。


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

我遇到了同样的问题,最后使用了一个JQuery解决方案来使它看起来像一个类可以继承其他类。


<script>
 $(function(){
 $(".composite").addClass("something else");
 });
</script>

这将找到所有带有类"复合"的元素,并将类"something"和"其他"添加到元素。 这样的东西 <div class="composite">...</div> 将会像这样结束:
<div class="composite something else">...</div>

完美的时机:我从这个问题给我邮件,找到一篇关于 LESS, 除此之外这 ruby 库:

super 看起来就像 footer ,但用不同的字体,我将使用一类 LESS 包含技术( 他们称之为 mixin ) 告诉它包括这些声明:


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

...