外部CSS！重要的是内联的！重要的是

Question

我有一个inline CSS规则，用于从外部样式表添加的div中删除div的padding-top和padding-bottom CSS规则，我无法使用！important进行修改。以下是我要修改的两个div。

<div class="class1 class2 class3 class4">
<div class="class1 class5 class6">

我宣布以下内容；

  .class2 {
    padding: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
  }
  .class5 {
    padding: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
  }

但是外部CSS文件正在加载此规则，覆盖了我的内联规则；

@media screen and (max-width: 767px) {
    .parent1 .parent2 .class1:first-child {
        padding-top: 17px !important;
    }
}
@media screen and (max-width: 767px) {
    .parent 1 .parent2 .class1:last-child {
        padding-bottom: 17px !important;
    }
}

为什么这会覆盖我的内联CSS规则？是否没有任何内联规则（尤其是使用！important）可以覆盖所有外部CSS（甚至使用！important）？根据我对特异性的理解，是任何内联样式都具有两个数量级以上的特异性

（（1，1，0，1，0）

比具有psuedo选择器的多父项多>]

（（1，0，0，4，0）。

[See here for documentation.Also here.And certainly here.

我添加了一个内联CSS规则，以从由外部样式表CSS规则添加的div中删除padding-top和padding-bottom，我无法使用！important进行修改。以下是两个div I ...

Answer 1

我通过使用比Squarespace使用的父选择器更多的父选择器解决了这一问题。我最终使用了这个；