Question

我有两个预定义的类（btn，fc-btn）

两者都定义了背景颜色和其他属性的值：

.btn {
    background-color: red;
    ....
}

.fc-btn {
    background-color: blue;
    ....
}

现在我有一个使用这两个类的元素：

<button class="btn fc-btn">Action</button>

是否有办法确保忽略fc-btn背景颜色并使用btn中的值（无论选择器层次结构如何）。

e.g。覆盖fc-btn属性。

.fc-btn {
        background-color: unset/inherit/???;
}

问题： unset似乎也取消了btn的价值继承不起作用，因为btn不是父类的一部分，而是它本身的

注释：我知道我可以从原来的fc-btn类中删除背景颜色，但它来自外部库，我宁愿覆盖它

Answer 1

使用.btn.fc-btn

添加新的stlye

.btn.fc-btn{
  background-color: red;
}

或者您可以!important以background格式添加.btn，这是不推荐的，

.btn {
    background-color: red !important;
    ....
}

或者如果您无法修改CSS，请将内联样式设置为按钮

<button class="btn fc-btn" style="background:red">Action</button>

Answer 2

您可以将！important添加到红色背景颜色

.btn {
    background-color: red!important;
}

Answer 3

@Chris在你的css文件中，将你的“.btn”类放在“.fc-btn”类下面。浏览器将自动优先使用“.btn”类，因为它从底部读取。