CSS类可以inheritance一个或多个其他类吗？
我觉得自己已经是一个networking程序员这么久了，不知道这个问题的答案，我真的希望这是可能的，我只是不知道，而不是我认为的答案（这是不可能的） 。
我的问题是，是否有可能从另一个CSS类（或多个）“inheritance”一个CSS类。
比如说我们有：
.something { display:inline } .else { background:red } 我想要做的是这样的：
.composite { .something; .else }
其中“.composite”类将内联显示并具有红色背景
有像LESS这样的工具，可以让你在更高的抽象层次上构buildCSS，类似于你所描述的。
less调用这些“Mixins”
代替
/* 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元素，例如
<div class="firstClass secondClass thirdclass fourthclass"></div>
inheritance不是CSS标准的一部分。
是的，但不完全是这种语法。
.composite, .something { display:inline } .composite, .else { background:red }
一个元素可以有多个类：
.classOne { font-weight: bold; } .classTwo { font-famiy: verdana; } <div class="classOne classTwo"> <p>I'm bold and verdana.</p> </div>
这就像你会很遗憾的一样。 我希望有一天能够看到这个function，以及类别别名。
保持您的共同属性，并再次分配特定的（或覆盖）属性。
/* ------------------------------------------------------------------------------ */ /* 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只不过是select器而已。
但是你可以在一个元素上指定两个类
<div class="something else">...</div>
或者你可以看看另一种forms的inheritance
.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中的设置被.foo样式。 您可能需要检查确切的W3C规范。 对于大多数属性， inherit是默认的，但不是全部。
我遇到了同样的问题，并最终使用JQuery解决scheme，使它看起来像一个类可以inheritance其他类。
<script> $(function(){ $(".composite").addClass("something else"); }); </script>
这将find类“复合”的所有元素，并添加类“东西”和“其他”的元素。 所以像<div class="composite">...</div>这样的东西最终会像这样：
<div class="composite something else">...</div>
别忘了：
div.something.else { // will only style a div with both, not just one or the other }
在Css文件中：
p.Title { font-family: Arial; font-size: 16px; } p.SubTitle p.Title { font-size: 12px; }
完美的时机 ：我从这个问题到我的电子邮件，find一篇关于Less的文章，一个Ruby库，其中包括：
由于 super 类似于 footer ，但是使用了不同的字体，所以我将使用Less的类包含技术（他们称之为混入）来告诉它也包含这些声明：
#super { #footer; font-family: cursive; }
你能做的最好的是这个
CSS
.car { font-weight: bold; } .benz { background-color: blue; } .toyota { background-color: white; }
HTML
<div class="car benz"> <p>I'm bold and blue.</p> </div> <div class="car toyota"> <p>I'm bold and white.</p> </div>
给定例子的SCSS方式将是这样的：
.something { display: inline } .else { background: red } .composite { @extend .something; @extend .else; }
更多信息，请查看sass基础知识
不幸的是，CSS不像C ++，C＃或Java这样的编程语言提供“inheritance”。 你不能声明一个CSS类，然后扩展它与另一个CSS类。
但是，您可以将多个单独的类应用于标记中的标记…在这种情况下，有一组复杂的规则可确定浏览器将应用哪种实际样式。
<span class="styleA styleB"> ... </span>
CSS会根据你的标记查找所有可以应用的样式，并将这些多个规则中的CSS样式组合在一起。
通常情况下，样式是合并的，但是当发生冲突时，稍后声明的样式一般会胜出（除非！样式中指定了！important属性，在这种情况下胜出）。 此外，直接应用于HTML元素的样式优先于CSS类样式。
我意识到这个问题现在很老了，但是，这里没什么！
如果意图是添加一个隐含多个类的属性的类，作为本地解决scheme，我会推荐使用JavaScript / jQuery（jQuery实际上并不是必须的，但肯定是有用的）
如果你有，例如.umbrellaClass从.baseClass1和.baseClass2 “inheritance”，你可以有一些JavaScript准备就绪。
$(".umbrellaClass").addClass("baseClass1"); $(".umbrellaClass").addClass("baseClass2");
现在， .umbrellaClass所有元素都具有这两个.baseClass的所有属性。 请注意，与OOPinheritance一样， .umbrellaClass可能有也可能没有自己的属性。
这里唯一需要注意的是考虑是否有代码被dynamic创build的元素，当这个代码触发时，这些元素是不存在的，但是也有一些简单的方法。
吮吸CSS没有本地inheritance，但。
你可以通过像这样的class =“something else”来应用多个CSS类到一个元素
正如其他人所说，你可以添加多个类到一个元素。
但是这不是重点。 我得到你的关于inheritance的问题。 真正的意义在于CSS中的inheritance不是通过类，而是通过元素层次结构来完成的。 因此，为了模拟inheritance特征，您需要将它们应用于DOM中不同级别的元素。
还有SASS，你可以在http://sass-lang.com/上find。; 有一个@extend标签，以及一个混合型系统。 （ruby）
这是LESS的竞争对手。
这在CSS中是不可能的。
CSS支持的唯一的东西比另一个规则更具体：
span { display:inline } span.myclass { background: red }
类“myclass”的跨度将具有两个属性。
另一种方法是指定两个类：
<div class="something else">...</div>
“其他”的风格将覆盖（或添加）“东西”的风格，
我正在寻找那样的疯狂，我只是通过尝试不同的东西来find它：P …那么你可以这样做：
composite.something, composite.else { blblalba }
它突然为我工作:)
其实你要求的东西存在 – 不过是作为附加模块来完成的。 在.NET中查看关于Better CSS的这个问题。
查看Larsenal关于使用LESS的答案，以了解这些附加组件的function。
CSS并不是真的在做你所要求的。 如果你想用这个综合的想法来编写规则，你可能想看看指南针 。 这是一个类似于已经提到的Less的样式表框架。
它可以让你做mixins和所有的好生意。
对于那些对上述（优秀）post不满意的人，你可以使用你的编程技巧来创build一个variables（PHP或者其中的一个）并且存储多个类名。
这是我能想出来的最好的黑客。
<style> .red { color: red; } .bold { font-weight: bold; } </style> <? define('DANGERTEXT','red bold'); ?>
然后把全局variables应用到你想要的元素，而不是类名自己
<span class="<?=DANGERTEXT?>"> Le Champion est Ici </span>
在特定的情况下，你可以做一个“软”的inheritance：
.composite { display:inherit; background:inherit; } .something { display:inline } .else { background:red }
这仅适用于将.composite类添加到子元素的情况。 这是“软”inheritance，因为没有在.composite中指定的值没有被明确地inheritance。 请记住，简单地写“内联”和“红色”而不是“inheritance”的字符依然不会太less。
以下是属性列表，以及它们是否自动执行此操作： https ： //www.w3.org/TR/CSS21/propidx.html
直接inheritance是不可能的。
可以使用父类标签的类（或标识符），然后使用CSS组合器来修改子标签的行为。
p.test{background-color:rgba(55,55,55,0.1);} p.test > span{background-color:rgba(55,55,55,0.1);} p.test > span > span{background-color:rgba(55,55,55,0.1);} p.test > span > span > span{background-color:rgba(55,55,55,0.1);} p.test > span > span > span > span{background-color:rgba(55,55,55,0.1);} p.test > span > span > span > span > span{background-color:rgba(55,55,55,0.1);} p.test > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);} p.test > span > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);} p.test > span > span > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}
<p class="test"><span>One <span>possible <span>solution <span>is <span>using <span>multiple <span>nested <span>tags</span></span></span></span></span></span></span></span></p>
如果您想要比LESS更强大的文本预处理器，请查看PPWizard：
http://dennisbareis.com/ppwizard.htm
警告这个网站真的很糟糕，并且有一个小的学习曲线，但是它非常适合通过macrosbuild立CSS和HTML代码。 我从来没有理解为什么更多的networking编码器不使用它。
你可以通过这种方式来实现类似于inheritance的行为：
.p,.c1,.c2{...}//parent styles .c1{...}//child 1 styles .c2{...}//child 2 styles
见http://jsfiddle.net/qj76455e/1/
这种方法的最大优点是模块化 – 您不会在类之间创build依赖关系（就像您使用预处理器“inheritance”类一样）。 所以任何关于CSS的变更请求都不需要任何大的影响分析。
如果你通过php预处理你的.css文件，你可以达到你想要的。 …
$something='color:red;' $else='display:inline;'; echo '.something {'. $something .'}'; echo '.else {'. $something .'}'; echo '.somethingelse {'. $something .$else '}';
…
