類擴展CSS

Question

對於example我有一些元素在不同的上下文中有不同的規則，但有些規則是相同的。

爲他們定義一個類並將其擴展到不同的環境中可以嗎？

.read-more { 
    display: inline-block; 
    text-align: center; 
    padding: 0 15px; 
    text-decoration: none; 
    color: blue; 
    margin-left: 5px; 
} 
#one .read-more { 
    background: yellow; 
} 
#two .read-more { 
    background: #ff9e13; 
} 

Answer 1

您可以擴展一個類以適應不同的需求。

請注意，未覆蓋的屬性將取自原始類。

例子：

.read-more { 
    display: inline-block; 
    text-align: center; 
    padding: 0 15px; 
    text-decoration: none; 
    color: blue; 
    margin-left: 5px; 
    border: 1px solid red; 
    background-image: url('img.png'); 
} 
#one .read-more { 
    background: yellow; 
    border: 2px solid green; 
} 

只有read-more所有元素都會有一個紅色的邊框，但那些ID one和read-more類將有綠色邊框。

另請注意，屬性background將刪除基類中的屬性background-image。因此，編號爲one和read-more的元素將不具有該圖像。