如何阻止我的css声明被覆盖

Question

我有一个A B C类的div 我在c中添加了一种样式，将颜色显示为“红色”;
问题是它被A和B的样式所覆盖。

我读到!important只能阻止css被内联样式覆盖，但不会阻止其他css覆盖。

如何将C的风格标记为最强？

Answer 1

将规则C的specificity增加到高于规则A和B的规则。通常我会在此处包含一些解释，但链接网站上的那个解释 superb 。

Answer 2

！important 声明为样式表作者提供了一种方法，使CSS值比自然具有更大的权重。这里应该注意，短语“！important declaration”是对整个CSS声明的引用，包括属性和值，并添加了！important。

这是一个简单的代码示例，清楚地说明了！important如何影响应用样式的自然方式：

#example {
        font-size: 14px !important;
    }

    #container #example {
        font-size: 10px;
    }

在上面的代码示例中，由于添加了！important，因此id为“example”的元素的文本大小为14px。

Answer 3

!important应该可以正常工作，但如果没有，你可以在你的声明中链接你的类：

div.a.c,div.b.c,div.a.b.c { color:red }

Answer 4

div.a, div.b {
    background-color: #00f;
}
div.c {
    background-color: #f00 !important;
}

!important将优先考虑规则和继承。

Answer 5

div.a, div.b, div.c {
  background-color: #00f;
} 
div.c {
   background-color: #f00;
}

应该有效，CSS是顺序的。这意味着应用该元素的最后一种样式，没有更具体的样式可用。更具体的是例如

body div.c {
   background-color: #f00;
}