外部 CSS !important 覆盖内联 !important答案

【问题标题】：External CSS !important overriding inline !important外部 CSS !important 覆盖内联 !important
【发布时间】：2020-01-09 22:40:20
【问题描述】：

我添加了一个 inline CSS 规则，用于从由外部样式表 CSS 规则添加的 div 中删除 padding-top 和 padding-bottom，我无法修改它使用 !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)

比带有伪选择器的多父节点

(1, 0, 0, 4, 0)。

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

编辑：正如@myf 所指出的，我对起源特异性值的理解似乎存在缺陷。内联 <style>[css rules]</style> 与 <link> css 文件具有相同的原始特异性值。因此，在我最初的 CSS 规则中，我的特异性会低于 Squarespace 的。仅具有较高的起源特异性值。请阅读@myf 的回复，这很有帮助。

【问题讨论】：

查看MDN: CSS Specificity 了解更多关于为什么会发生这种情况的信息。外部 CSS 更具体，这就是它优先考虑的原因。
@SunnyPatel 我确实阅读了 MDN 页面以了解具体情况，这是我寻求帮助的第一件事。但是，MDN 也声明任何内联 CSS 都应该覆盖外部 CSS，即使它们都具有！ !important 并且有 "a=1" 那么内联值不应该覆盖吗？）。请在下面查看我对每个 CSS 规则的特异性的计算。
在这种情况下，将“内联”的含义理解为非常字面意思，就像实际上在同一行中一样，并且作为元素的一部分。其他任何东西都不会被视为“内联”（相对而言）。此外，在所有其他条件相同的情况下，具有更多细节的规则往往会覆盖具有更少细节的规则。如果它有效，并且您的语法没有缺陷（即不是侥幸），那么这就是 CSS 的工作方式。大多数人通过原始经验学习这一点，但每个人都有自己的经验。

标签： html css media-queries squarespace

【解决方案1】：

您显然混淆了源自物理 HTML 属性 (<el style="[css declarations]">) 的 内联样式来源 与具有 "author" 级别起源特异性，源自<style>[css rules]</style> 或<link rel="stylesheet" href="[css file url]">。

页面中的样式和链接元素在原点上是相等的，属性在原点上更具体。

inline 来源级别（属性）的!important 规则无法与作者级别来源的!important 规则相匹配。

【讨论】：

非常感谢！在这种情况下，因为我使用的是而不是它与共享相同的来源特定性值。由于我使用的是作者级别的规则，因此我在“a,b,c,d,e”中的 b 值将与外部样式表相同。我应该一直使用因为那会有更高的起源特异性值。我对起源特异性如何发挥作用的基本理解存在缺陷。

【解决方案2】：

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

.parent1 .parent2 .parent3 .class {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

但我仍然很困惑为什么这会起作用。特别是因为文档专门（明白了吗？）指出内联值以“a，b，c，d，e”的特异性顺序保存“b = 1”值，而每个父选择器只有一个额外的“d = 1” " 值和 !important 值具有 "a=1" 值。

供参考，特异性为

"!important 1/0 (if using=1, if not=0), inline 1/0 (if inline=1, if not=0), id (总#id使用), class/attrib/psuedo （总 .class、[attrib] 或 :pseudo 用法）、元素（总 html body header main nav 等用法）"

所以我原来的选择器（没有多个父母）将等于

“1, 1, 0, 1, 0”(EDIT: I used <style>css</style> NOT <el style="css"> therefore the actual value is "1, 0, 0, 1, 0" because <style> rules have the same specificity value as external <link> stylesheets)

因为我使用 !important 所以“a=1”，使用内联“b=1”EDIT: "b=0"，不使用 ID“c=0”，使用 1 个类选择器“d=1”，不使用元素选择器"e=0"

Squarespace 选择器等于

"1, 0, 0, 4, 0,"

因为！重要的“a=1”，不是内联“b=0”，没有使用 ID“c=0”，4 类/伪用法总计“d=4”，没有使用元素选择器“e=0” .

因此，我原来的选择器应该已经覆盖了 Squarespace 选择器。

但取而代之的是等于

的新选择器

“1、1、0、4、0”EDIT: "1, 0, 0, 4, 0" see above edit

（见下文）是唯一有效的方法。

因为 !important "a=1"，内联 "b=1"，不使用 ID "c=0"，总共四个类使用 "d=4"，不使用元素选择器 "e=0"

【讨论】：