本文介绍了CSS特异性和!important的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我认为我对特异性和!important的工作方式有错误的理解.

I think I have a wrong understanding of how specificity and !important works .

考虑以下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>

STYLE.CSS

STYLE.CSS

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

STYLE1.CSS

STYLE1.CSS

.outer .inner1 .inner2 {
    color:red ;

}

我的理解是,即使syle1.css中的规则具有更高的特异性,style.css中的规则也不会被覆盖(因为它具有重要的标记).我当时认为规则是在HTML文件(首先是style.css,然后是style1.css)中遇到时应用的,并且仅当规则更具体时,元素的特定属性的值才会被覆盖(重要的标记可以防止无论后续规则有多具体,都应将此置于压倒性地位).这显然不是它的工作方式.有人可以告诉我!important和特异性如何工作,以及何时使用!important?

My understanding was the rule in style.css will never be overwritten (as it has an important tag) even though the rule in syle1.css has more specificity .I was thinking rules are applied as they are encountered in the HTML file ( style.css first and then style1.css) , and a value for a particular property of an element will be overwritten only if the rule is more specific ( important tag prevents this overriding no matter how specific the subsequent rule is ) . This apparently is not how it works . Could someone tell me how does !important and specificity work and when do you use !important ?

推荐答案

- 特异性:直接针对元素与继承的样式

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

Note: the addition of the new contrived ruleset in Demo:

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

它具有0,0,7,4和!important的极其荒谬的不必要的巨大特异性得分.CSS从右到左读取:

It has an incredibly ridiculously unnecessarily huge specificity score of 0,0,7,4 and !important as well. CSS reads from right to left:

  1. 使用类 .inner3
  2. 查找< aside> 标记
  3. 它必须有一个父类< div> ,其类为 .inner2 .
  4. 另外,< div class ="inner2"> 必须具有父类< div> ,其类为 .inner1
  5. 而且必须使< div class ="inner1"> 的父类< div> 具有 .outer .
  1. Find an <aside> tag with the class of .inner3
  2. It must have a parent <div> that has the class of .inner2.
  3. Also that <div class="inner2">must have a parent <div> with a class of .inner1.
  4. And it's imperative that <div class="inner1"> have a parent <div> with the class of .outer.

必须满足选择器的所有这些特定规则,以便深度嵌套的< aside> 标签具有其样式. .inner3 的任何后代元素都将继承 color:blue 属性和值,但很容易被 i.inner2 之类的.

All of these specific rules of the selector must be met just so a deeply nested <aside> tag gets its style. Any descendant elements of .inner3 will inherit color: blue property and value, but it is easily overridden by the likes of i.inner2 with 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框底部的新规则集:

Note: the new ruleset at the bottom of CSS box:

  div {
    color: black !important
  }

现在,此选择器特定于 所有divs ,因此这是为!important 刚刚分配了一个范围广泛的选择器的方式.这可能更像您期望的行为.

Now this selector is specific to all divs so here is how !important has just been assigned a selector with a far reaching scope. This is probably more like the behavior you were expecting.

顺便说一句,您可能会注意到重复的类:

BTW, you probably noticed the duplicate classes:

  .outer.outer.outer

这称为选择器链接,它将增加选择器的特异性得分.请参见 在线特异性计算器 .

That is called selector chaining which will increase a selector's specificity score. See 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>

这篇关于CSS特异性和!important的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-05 05:50
查看更多