Question

所以，我正在使用DRUPAL的服务，它有自己的风格。

我尝试使用带有！important标签的css来覆盖它，但似乎没有工作。服务的风格非常简单，我只想覆盖背景颜色属性。

.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的网络开发者工具（按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类正确地覆盖了背景颜色。

您遇到的问题必须在其他地方。可能是另一个类覆盖您的背景颜色。你能提供一个你正在谈论的问题的演示网站吗？

用css覆盖内联样式

2 个答案:

实施例