Question

我添加了 inline CSS规则，以从由外部样式表CSS规则添加的div中删除padding-top和padding-bottom，我无法修改使用！important的CSS规则。以下是我要修改的两个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.

编辑：@myf指出，我对原产地特异性值的理解似乎存在缺陷。内联<style>[css rules]</style>具有与<link> CSS文件相同的原始特异性值。因此，在我最初的CSS规则中，我的特异性要比Squarespace的特异性低。仅具有较高的原点特异性值。请阅读@myf的回复，它非常有帮助。

Answer 1

您显然将内联样式源（其源自物理HTML属性（getMenuInflater().inflate(R.menu.game_menu, menu);）与具有“作者的页内样式表相混淆“ 级别的起源特异性，起源于<el style="[css declarations]">或<style>[css rules]</style>。

页面中的样式和链接元素在起源上是相等的，属性在起源上更特定。

不可能用来自作者级别起源的<link rel="stylesheet" href="[css file url]">规则来击败来自内联起源级别（属性）的!important规则。

Answer 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”值。

作为参考，特异性为

“ !!重要的1/0（如果使用== 1，如果不是= 0），内联1/0（如果inline = 1，如果不是= 0），id（总ID用法），类/ attrib / psuedo （总计.class，[attrib]或：pseudo用法），元素（总计html正文标头主要的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

（见下文）是唯一可行的方法。

因为重要！“ a = 1”，内联“ b = 1”，未使用ID“ c = 0”，总共使用了四种类“ d = 4”，未使用元素选择器“ e = 0”

外部CSS！important覆盖内联！important

2 个答案: