是否可以创建一个从另一个CSS类(或多个)“继承”的CSS类。
例如,假设我们有:
.something { display:inline }
.else { background:red }
我想做的是:
.composite
{
.something;
.else
}
其中“.composite”类将显示为内联,并具有红色背景
是否可以创建一个从另一个CSS类(或多个)“继承”的CSS类。
例如,假设我们有:
.something { display:inline }
.else { background:red }
我想做的是:
.composite
{
.something;
.else
}
其中“.composite”类将显示为内联,并具有红色背景
当前回答
Less和Sass是以有价值的方式扩展CSS语言的CSS预处理器。他们提供的众多改进中只有一项是您正在寻找的选项。Less有一些非常好的答案,我将添加Sass解决方案。
Sass具有扩展选项,允许一个类完全扩展到另一个类。有关扩展的更多信息,请参阅本文
其他回答
这在CSS中是不可能的。
CSS中唯一支持的是比另一条规则更具体:
span { display:inline }
span.myclass { background: red }
类为“myclass”的span将同时具有这两个财产。
另一种方法是指定两个类:
<div class="something else">...</div>
“else”的样式将覆盖(或添加)“something”的样式
您可以向单个DOM元素添加多个类,例如。
<div class="firstClass secondClass thirdclass fourthclass"></div>
后面的类(或更具体的类)中给出的规则将覆盖。所以这个例子中的第四类占了上风。
继承不是CSS标准的一部分。
我意识到这个问题已经很老了,但是,这里什么都没有!
如果目的是添加一个包含多个类的财产的类作为本机解决方案,我建议使用JavaScript/jQuery(jQuery确实不是必需的,但确实很有用)
例如,如果您有从.baseClass1和.baseClass2“继承”的.bumbellaClass,则可以有一些JavaScript在就绪时启动。
$(".umbrellaClass").addClass("baseClass1");
$(".umbrellaClass").addClass("baseClass2");
现在.umbrellaClass的所有元素都将具有.baseClasss的所有财产。请注意,与OOP继承一样,.umbrellaClass可能有也可能没有自己的财产。
这里唯一需要注意的是,是否有动态创建的元素在代码触发时不存在,但也有简单的方法可以解决。
不过,Sucks css没有原生继承。
不要将css类视为面向对象的类,将它们视为其他选择器中的一个工具,用于指定html元素的样式。将大括号之间的所有内容视为属性类,左侧的选择器告诉它们选择的元素从属性类继承属性。例子:
.foo, .bar { font-weight : bold; font-size : 2em; /* attribute class A */}
.foo { color : green; /* attribute class B */}
当一个元素被赋予属性class=“foo”时,最好不要将其看作是从class.foo继承属性,而是从属性class A和属性class B继承属性。也就是说,继承图是一个层次,元素从属性class派生,选择器指定边的位置,以及当存在竞争属性时确定优先级(类似于方法解析顺序)。
编程的实际含义是这样的。假设您有上面给出的样式表,并希望添加一个新的类.baz,其中它应该具有与.foo相同的字体大小。最简单的解决方案是:
.foo, .bar { font-weight : bold; font-size : 2em; /* attribute class A */}
.foo { color : green; /* attribute class B */}
.baz { font-size : 2em; /* attribute class C, hidden dependency! */}
每当我要打两次字时,我都会很生气!我不仅要写两次,现在我没有办法用程序表示.foo和.baz应该具有相同的字体大小,而且我创建了一个隐藏的依赖项!我的上述范例建议我应该从属性类A中抽象出字体大小属性:
.foo, .bar, .baz { font-size : 2em; /* attribute base class for A */}
.foo, .bar { font-weight : bold; /* attribute class A */}
.foo { color : green; /* attribute class B */}
这里的主要抱怨是,现在我必须再次键入属性类A中的每个选择器,以指定它们应该选择的元素也应该继承属性基类A中的属性。然而,替代方法是,必须记住在每次发生更改时编辑每个存在隐藏依赖项的属性类,或者使用第三方工具。第一个选项让上帝发笑,第二个选项让我想自杀。
不幸的是,CSS不像C++、C#或Java等编程语言那样提供“继承”。您不能声明一个CSS类,然后用另一个CSS扩展它。
但是,您可以将多个类应用于标记中的标记。。。在这种情况下,有一组复杂的规则来确定浏览器将应用哪些实际样式。
<span class="styleA styleB"> ... </span>
CSS将根据标记查找可应用的所有样式,并将这些多个规则中的CSS样式组合在一起。
通常,会合并样式,但当出现冲突时,通常会以稍后声明的样式获胜(除非在其中一个样式上指定了!important属性,在这种情况下,将获胜)。此外,直接应用于HTML元素的样式优先于CSS类样式。