用CSS覆盖内联样式

Question

因此，我正在使用DRUPAL的服务，它具有自己的样式。

我尝试应用具有！important标记的css来覆盖它，但似乎无法正常工作。 服务中的样式非常简单，我只想覆盖background-color属性。

.FixBackground{
    background-color: rgb(238,238,238) !important;
}

@media all and (max-width: 1920px){
    .Container{
        max-width: 40vw;
    } 
}

@media all and (max-width: 1023px){
    .Container{
        max-width: 80vw;
    } 
}

@media all and (max-width: 728px){
    .Container{
        max-width: 90vw;
    } 
} 

@media all and (max-width: 567px){
    .Container{
        max-width: 90vw;
    } 
}

这是我正在使用的代码示例。 一切正常。 背景正在运行，但是并没有从服务提供给我的html代码的某些部分覆盖样式。 内联样式未标记

Answer 1

!important不覆盖其他规则（ 包括内联样式 ）的唯一方法是， 在您的规则之后还有另一个!important规则。

我建议您使用Chrome的Web开发人员工具 （按F12键，其他浏览器的工具非常相似）并检查您感兴趣的元素。在那里，您可以看到哪些规则真正适用（在“ 计算”标签中），哪些规则被覆盖了 （被卡住 ）等等。潜在的问题还在于您指定了错误的选择器 ，因此该规则不适用，因此您将无法在此处找到规则（但您知道问题出在哪里）。

通常，使用检查器是调试此类问题的方法。

例

例如，在以下示例中， font-size:100%被font-size:13px覆盖：

在计算选项卡中，您将看到计算值：

您还可以在其中查看特定属性的所有覆盖规则（单击箭头后）：

Answer 2

您发布的代码是正确的，请参见小提琴： https : //jsfiddle.net/unn3uen4/1/

<div class="container">
<p>
Test Container
</p>
</div>

<div class="container fix-background">
<p>
Test Override
</p>
</div>

在我的测试中，fix-background类正确覆盖了背景颜色。

您遇到的问题必须在其他地方。 可能有另一类覆盖您的背景色。 您可以为演示网站提供您所谈论的问题吗？