css - 类扩展 CSS

Question

例如，我有一些元素在不同的上下文中具有不同的规则，但有些规则是相同的。

可以为他们定义一个类并在不同的上下文中扩展它吗？

.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;
}

所有带有 just 的元素read-more都会有一个红色边框，但那些有 idone和 class的元素read-more会有绿色边框。

另请注意，该属性background将删除background-image基类中的属性。one因此，具有 id和 class的元素read-more将没有图像。