CSS 特异性和 !important答案

【问题标题】：CSS specificity and !importantCSS 特异性和 !important
【发布时间】：2018-05-22 11:35:41
【问题描述】：

我认为我对特异性和 !important 的工作原理有错误的理解。

考虑下面的 HTML：

 <head>
<link href="css/style.css" rel="stylesheet">
<link href="css/style1.css" rel="stylesheet">
 </head>
  <body>
     <div  class = "outer">
        <div class = "inner1">
            <div class = "inner2">
                <p>Voluptate labore cupidatat an enim quamquam ut anim malis, varias id sed veniam 
                    quibusdam, singulis aliqua ut singulis domesticarum, id aliqua illum o officia, 
                    et ab domesticarum, irure e excepteur o eram nam appellat coniunctione do 
                    commodo..</p>
            </div>
        </div>
      </div>

样式.CSS

.outer .inner1  {
    color:green !important;
}

样式1.CSS

.outer .inner1 .inner2 {
    color:red ;

}

我的理解是 style.css 中的规则永远不会被覆盖（因为它有一个重要的标签），即使 syle1.css 中的规则更具体。我在想规则是在 HTML 文件中遇到的时候应用的（首先是 style.css，然后是 style1.css），只有当规则更具体时，元素的特定属性的值才会被覆盖（重要标签阻止无论后续规则多么具体，这都是最重要的）。这显然不是它的工作原理。有人可以告诉我 !important 和 specificity 是如何工作的，你什么时候使用 !important ？

【问题讨论】：

Specifity 会覆盖继承的规则，即使使用 !important。

标签： css

【解决方案1】：

无论继承规则的特殊性如何，直接目标元素的样式总是优先于继承的样式。

-- Specificity: Directly targeted elements vs. inherited styles

注意：在演示中添加了新的人为规则集：

div.outer.outer.outer>div.inner1>div.inner2.inner2>aside.inner3 {
  color: blue !important
}

它有一个非常荒谬且不必要的巨大特异性得分 0,0,7,4 和 !important。 CSS 从右到左读取：

查找类为.inner3 的<aside> 标签
它必须有一个父 <div>，其类为 .inner2。
另外，<div class="inner2"> 必须有一个父 <div>，其类为 .inner1。
<div class="inner1"> 必须有一个 <div> 的父类 .outer。

必须满足选择器的所有这些特定规则，以便深度嵌套的<aside> 标记获得其样式。 .inner3 的任何后代元素都将继承 color: blue 属性和值，但它很容易被 i.inner2 和 color:red 覆盖。

   <div class="inner3">
     <p>This deeply nested text has <i class='inner2'>crazy specificity but this text is red.</i>
       ...
     </p>
   </div>

注意： CSS 框底部的新规则集：

  div {
    color: black !important
  }

现在这个选择器特定于所有 div，所以这就是 !important 刚刚被分配一个范围很广的选择器的方式。这可能更像您所期望的行为。

顺便说一句，您可能注意到了重复的类：

  .outer.outer.outer

这称为选择器链接，它会增加选择器的特异性分数。请参阅 Online Specificity Calculator。

演示

div.outer.outer.outer>div.inner1>div.inner2.inner2>aside.inner3 {
  color: blue !important
}

.outer .inner1 {
  color: green !important;
}

.outer .inner1 .inner2 {
  color: red;
}

div {
  color:black !important;
}

<head>
  <link href="css/style.css" rel="stylesheet">
  <link href="css/style1.css" rel="stylesheet">
</head>

<body>
  <div class="outer">
    <div class="inner1">
      This text will be green...
      <div class="inner2">
        <p>Voluptate labore cupidatat an enim quamquam ut anim malis, varias id sed veniam quibusdam, singulis aliqua ut singulis domesticarum, id aliqua illum o officia, et ab domesticarum, irure e excepteur o eram nam appellat coniunctione do commodo..
        </p>

        <aside class='inner3'>
          <p>This deeply nested text has <i class='inner1'>crazy specificity</i>, yet it only applies to it and its descendants with no specific <b class='inner2'>`color` property</b>.</p>
        </aside>
      </div>
      ...and this text will be green as well.
    </div>
  </div>

【讨论】：