CSS特殊性类别

Question

我的HTML中有以下代码：

<div class="card__side card__side--back card__side--back-1">

问题是，当我尝试在CSS中修改这3个类时，最后一个类会继承第二个类的值，因为其特异性是相同的。我试图将background-color设置为最后一个类（card__side--back-1），但是它不起作用。

我还尝试将最后一个类更改为ID，但随后将所有其他类弄乱了。

是否有某种方法可以使所有这些类以一种不会替代另一种的方式工作？

Answer 1

如果您像这样使用普通的CSS（级联）：

.card__side {
    background red;
}

.card__side--back {
    background: blue;
}

.card__side--back-1 {
    background: orange;
}

然后，背景的确会是橙色的，因为该属性在样式表中被设置为最后一个。我能想到的唯一可以弥补这一点的问题是，当您使用诸如SASS之类的东西并使用奇怪的嵌套样式时，诸如此类（我不建议这样做）：

.card__side {
    background red;

    &--back {
        background: blue;

        &-1 {
            background: orange;
        }
    }
}

但是这仍然会显示橙色背景...您能显示您的（S）CSS以便我们看到实际的问题吗？