Question

我认为我对特异性和重要性如何运作有错误的理解。

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

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

STYLE1.CSS

.outer .inner1 .inner2 {
    color:red ;

}

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

Answer 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和！也很重要。 CSS从右到左阅读：

找到<aside>

.inner3

必须拥有<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 。

演示

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

CSS特异性和！重要

1 个答案:

演示