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 选择器，第二个应用具有更高的特异性。

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