CSS类重写属性以使用另一个类的值

Question

I have two predefined classes (btn, fc-btn)

Both define the value for background-color and other properties:

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

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

Now I have an element that uses both classes:

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

Is there a way to make sure that the fc-btn background-color is ignored and the value from btn is used (regardless of selector hierarchy).

eg override the fc-btn property.

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

Problem: unset seems to also unset the value from btn inherit does not work because btn is not a class of the parent but of itself

Comment: I know that I could just remove the background-color from the original fc-btn class, but it comes from an external library and I would rather override it

Answer 1

Add a new stlye with .btn.fc-btn

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

or you can add !important to background in .btn style which is not recommended,

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

Or If you can't modify CSS then set an inline style to the button

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

Answer 2

You can add !important to the red background color

https://jsfiddle.net/r6yp9wof/

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

Answer 3

@Chris In your css file place your ".btn " class below to ".fc-btn" class. A browser will automatically give priority to ".btn" class because it reads from the bottom.