Html 用css覆盖内联样式

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

我试着使用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代码的某些部分中的样式。

---

内联样式未标记

您发布的代码是正确的，请参阅fiddle:

测试容器


测试覆盖

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

---

你遇到的问题一定在别的地方。可能是另一个类覆盖了背景色。你能提供一个演示网站来展示你正在谈论的问题吗？

唯一的方法是

！重要提示

不会覆盖其他规则（包括内联样式），而是存在另一个

！重要的

规则在你的规则之后

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

使用inspector通常是调试此类问题的方法

例子 例如，在以下示例中，

font-size:100%

被

font-size:13px

覆盖：

在“计算”选项卡中，可以看到计算值：

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

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

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