html - 用 css 覆盖内联样式

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 的 web 开发人员工具(按 F12，其他浏览器的工具非常相似)并检查您感兴趣的元素。在那里您可以看到真正适用的规则(在 Computed 选项卡中)，哪些规则被覆盖(卡住了)等等。一个潜在的问题是您指定了错误的选择器，因此该规则不适用，那么您不会在那里找到您的规则(但您知道问题出在哪里)。

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

例子

例如 font-size:100% 在下面的例子中被 font-size:13px 覆盖:

在 Computed 选项卡中，您会看到计算值:

您还可以看到特定属性的所有覆盖规则(单击箭头后):