是否支持CSS继承

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

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

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

的Class1和Class2中会继承您分配，只要他们没有明确在样式表覆盖为基础的任何样式。

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

查看更多w3.org。

Answer 3

不是。你可以做的是使用基类，并且使用另一个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 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; 
}