CSS类可以继承一个或多个其他类吗？

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

例如，假设我们有：

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

我想做的是：

.composite 
{
   .something;
   .else
}

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

当前回答

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

http://dennisbareis.com/ppwizard.htm

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

其他回答

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

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

这将查找具有类“composite”的所有元素，并将类“something”和“else”添加到元素中。所以类似于＜div class=“composite”＞</div>将这样结束：＜div class=“composite something other”＞</分区>

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

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

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

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

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

在特定情况下，可以执行“软”继承：

.composite
{
display:inherit;
background:inherit;
}

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

这仅在将.composite类添加到子元素时有效。它是“软”继承，因为任何未在.composite中指定的值都不会明显继承。请记住，简单地写“inline”和“red”而不是“inherit”仍然会减少字符数。

以下是财产列表，以及它们是否自动执行此操作：https://www.w3.org/TR/CSS21/propidx.html

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

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

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

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

是的，但不完全符合这个语法。

.composite,
.something { display:inline }

.composite,
.else      { background:red }

推荐文章