ID中的CSS类获胜

Question

两个嵌套的div，外部由ID标识，内部由类标识：

<div id="theID">
    <div class="aClass">Class inside ID</div>
</div>

假设我们有类和ID的规则

.aClass {color: green; }
#theID { color: yellow; }

根据我的理解，这两个规则都适用于文本，因此具有较高特异性（#theID）的规则应该获胜。

但由于某种原因，类规则获胜并且文本呈现为绿色。

为什么？

Answer 1

谢谢大家。换句话说，仅当有几个规则直接应用于元素时，才使用特异性优先级。

否则父母的样式表适用，其计算方式类似。

还有一个例子：

<div id="theID">
    <div class="aClass">
      <p>Class inside ID and within P</p>
    </div>
</div>

和CSS：

.aClass p {
    text-transform: lowercase;
}
#theID p {
    text-transform: uppercase;
}

这两个规则直接适用于<p>元素，但由于存在ID选择器，第二个规则适用于更高的特异性。

因此生成的文本将为大写。

Answer 2

#theID更具体于外部div（直接样式，而不是继承样式），因此其中的所有文本都将为黄色。但是.aClass更特定于内部div，因此其中的所有内容都是绿色（直接样式）而不是黄色（继承样式）。

Answer 3

浏览器从外部元素到内部元素收集/读取css信息。

首先调用外部元素，然后调用内部元素。

<div id="theID">
   I am Yellow
   <div class="aClass">I am Green</div>
</div>

另一个例子：

<div id="theID">
   I am Yellow
   <div class="aClass">
       <span style="color:purple">
          I am purple
       </span>
   </div>
</div>

最后的元素风格总会赢。

Answer 4

每个元素都有CSS属性。在这种情况下，有两个div元素，每个元素都有自己的color属性。这两个元素明确地设置了这些属性，没有冲突的CSS规则，因此毫无疑问是特异性或继承。

文本“Class inside ID”是内部div元素的文本内容，因此它获得了颜色。外部元素的color设置会影响该元素中未包含在具有自己颜色集的内部元素中的任何文本，但是没有这样的文本，因此该设置无效。