类扩展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的元素将不具有该图像。