应用于子元素的CSS规则顺序

Question

我想知道CSS规则如何应用于子元素。

h2的{​​{1}}样式已被覆盖，因为父级别样式gray的颜色为.level2 h2。

但是blue并没有采用相同的方式。

请参阅以下示例。

.level1 h2

.level1 h2 {
  color: green;
}
.level2 h2 {
  color: blue;
}
h2 {
  color: gray;
}

Answer 1

关于specificity和继承的全部内容。

  

“级联”的概念是CSS的核心（只需看看它   名称）。它最终确定哪些属性将修改给定的属性   元件。级联与三个主要概念相关：重要性，   特异性和来源顺序。级联遵循这三个步骤   确定要分配给元素的属性。到此结束   在这个过程中，级联为每个规则分配了一个权重   权重确定哪个规则优先于多个规则   适用。

如果两个选择器具有相同的特异性，它还取决于样式表中的顺序。

＆＃13;

＆＃13;

    .level2 h2 {
        color: blue;
    }
    .level1 h2 {
        color: green;
    }

    h2 {
        color: gray;
    }

＆＃13;

     <div class="level1">
        <div class="level2">
           <h2>test</h2>
        </div>
     </div>

＆＃13;

＆＃13;

＆＃13;

来源： https://www.smashingmagazine.com/2010/04/css-specificity-and-inheritance/

Answer 2

这是CSS Specificity

的问题

  

概念

     

特异性是浏览器决定哪个CSS属性的方法   值与元素最相关，因此也是如此   应用。特异性基于组成的匹配规则   不同种类的CSS选择器。

     

如何计算？

     

特异性是应用于给定CSS声明的权重，   由匹配中每个选择器类型的数量确定   选择。当特异性等于任何倍数时   声明，在CSS中找到的最后一个声明应用于   元件。特异性仅适用于相同元素的目标   多个声明。按照CSS规则直接定位元素会   始终优先于元素继承自的规则   的祖先。

其中：

• .level1 h2和.level2 h2具有以下特征：0 0 1 1

虽然：

• h2仅具有以下特征：0 0 0 1

因此h2 更少具体。

如果具有相同特异性

，它将占用最新的样式

您可以测试/计算特异性here

应用了最后一个样式的level2的片段

.level1 h2 {
  color: green;
}
.level2 h2 {
  color: blue;
}
h2 {
  color: gray;
}

<div class="level1">
  <div class="level2">
    <h2>test</h2>
  </div>
</div>

应用了level1作为最后一个样式的片段

.level2 h2 {
  color: blue;
}
.level1 h2 {
  color: green;
}
h2 {
  color: gray;
}

<div class="level1">
  <div class="level2">
    <h2>test</h2>
  </div>
</div>

Answer 3

.level2 h2更加重要，因为它在样式表中被进一步声明。它也比h2更重要，因为它由标签名称和类名组成。

Answer 4

由于此处的特定性与＃34; .level1 h2＆＃34;相同。和＆＃34; .level2 h2＆＃34;，浏览器查看它在CSS中声明的顺序。

＆＃34; h2＆＃34;使标记变为灰色的标记具有较低的特异性，因此将被其他声明覆盖。

＆＃13;

＆＃13;

h2 {
  color: gray;
}

/* Situation 1, level 2 declared first */
.situation1.level2 h2 {
  color: blue;
}

.situation1.level1 h2 {
  color: green;
}

/* Situation 1, level 2 declared last */
.situation2.level1 h2 {
  color: green;
}
.situation2.level2 h2 {
  color: blue;
}

＆＃13;

Level 2 declared <b>first</b> 
  <div class="level1 situation1">
      <div class="level2 situation1">
         <h2>test</h2>
      </div>
   </div>


  Level 2 declared <b>last</b> 
  <div class="level1 situation2">
      <div class="level2 situation2">
         <h2>test</h2>
      </div>
   </div>

＆＃13;

＆＃13;

＆＃13;