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

例如,假设我们有:

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

我想做的是:

.composite 
{
   .something;
   .else
}

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


当前回答

不要将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中的属性。然而,替代方法是,必须记住在每次发生更改时编辑每个存在隐藏依赖项的属性类,或者使用第三方工具。第一个选项让上帝发笑,第二个选项让我想自杀。

其他回答

一个元素可以包含多个类:

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

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

不幸的是,这几乎和你会得到的一样接近。我希望有一天能看到这个特性以及类别名。

Less和Sass是以有价值的方式扩展CSS语言的CSS预处理器。他们提供的众多改进中只有一项是您正在寻找的选项。Less有一些非常好的答案,我将添加Sass解决方案。

Sass具有扩展选项,允许一个类完全扩展到另一个类。有关扩展的更多信息,请参阅本文

在Css文件中:

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

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

而直接继承是不可能的。

可以为父标记使用类(或id),然后使用CSS组合符改变子标记的继承行为。

p.test{背景色:rgba(55,55,55,0.1);}p.test>span{背景色:rgba(55,55,55,0.1);}p.test>span>span{背景色:rgba(55,55,55,0.1);}p.test>span>span>span{背景色:rgba(55,55,55,0.1);}p.test>span>span>span{背景色:rgba(55,55,55,0.1);}p.test/span>span>span>span{背景色:rgba(55,55,55,0.1);}p.test/span>span>span>span>span{背景色:rgba(55,55,55,0.1);}p.test>span>span>/span>span>span{背景色:rgba(55,55,55,0.1);}p.test>span>span>span>span>span>span>span{背景色:rgba(55,55,55,0.1);}<p class=“test”><span>一种可能的<span>解决方案<span>是使用<span>多个<span>嵌套<span>标记</span></span><span></span></span></p>

我不建议像示例那样使用这么多跨度,但这只是概念的证明。当试图以这种方式应用CSS时,仍然会出现许多错误。(例如,更改文本装饰类型)。

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

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