代码之家 › 专栏 › 技术社区 › Knownow

CSS特殊性和!重要的

css

Knownow · 技术社区 · 8 年前

我想我对具体性和!重要工作。

请考虑下面的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),并且只有当规则更具体时,元素的特定属性的值才会被覆盖(重要的标记会阻止这种覆盖,无论后续的属性有多具体)规则是)。这显然不是它的工作原理。有人能告诉我怎么做吗?重要和特殊的工作,以及何时使用!重要吗?

1 回复 | 直到 8 年前

zer00ne 8 年前

直接目标元素的样式总是优先于继承的样式,而不管继承规则的特殊性如何。

—— 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和!也很重要。CSS从右向左读取:

查找 <aside> 用类标记 .inner3
它必须有一个父母 <div> 那是属于 .inner2 .
还有那个 <div class="inner2"> 必须有父级 <分区> 与一类 .inner1 .
必须这样做 <div class="inner1"> 有一个家长 <分区> 和 .outer .

选择器的所有这些特定规则都必须满足这样一个深度嵌套的 <旁白> 标签得到它的样式。的任何后代元素 .内部3 将继承 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>