类扩展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的所有元素都会有一个红色边框，但标识为one和类read-more的元素会有绿色边框。

另请注意，属性background将删除基类中的属性background-image。因此，标识为one且类read-more的元素将不具有该图像。