Question

可能重复：
Inherit CSS class

CSS是否支持继承？

假设我们有：

.base
{
}

.class1 :base
{
}

.class2 :base
{
}

如何让class1和class2包含base中存在的所有样式？

Answer 1

CSS不支持单词的类意义上的继承，而是基于特定和顺序。如果为类class1和class2定义一组公共属性，然后根据需要进行特化。

.class1, .class2
{
    font-size:1.1em;
}

.class1
{
    color:red;
}

.class2
{
    color:green;
}

Answer 2

没有。你可以做的是使用基类，并使用你需要的另一个class1和class2，而不是将两个类添加到元素。例如：

.base
{
color: Black;
font-size: 12pt;
}

.class1
{
font-weight: bold;
color: Blue;
}
<div class="base">This will be black, 12pt.</div>
<div class="base class1">This will be blue, 12pt, bold.</div>

Answer 3

CSS确实支持继承。如果你的html标签布局如下：

<div class="base">
    ...
    <div class="class1>
        ...
    </div>
    <div class="class2">
        ...
    </div>
</div>

Class1和Class2将继承您为Base指定的任何样式，只要它们未在样式表中明确覆盖。

.base {
    font-size: 12pt;    // all child elements get this font size if another font-size is not specified
}

查看w3.org了解更多信息。

Answer 4

不，但有一些工具（如SASS）可用于“编译”CSS。一个例子：

SASS：

.error {
  border: 1px #f00;
  background: #fdd;
}
.error.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}

.badError {
  @extend .error;
  border-width: 3px;
}

，“编译”到：

.error, .badError {
  border: 1px #f00;
  background: #fdd;
}

.error.intrusion,
.badError.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}

.badError {
  border-width: 3px;
}

CSS是否支持继承

4 个答案: