类扩展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。因此，id为one且类为read-more的元素将不会有该图像。