是否支持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; 
}