css - ID 内的 CSS 类获胜

Question

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

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

假设我们对类和 ID 都有规则

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

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

但是由于某种原因，班级规则获胜，文本呈现绿色。

这是为什么？

score 2 · Accepted Answer

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

否则，父样式表将应用，其计算方式类似。

再来一张插图：

<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 选择器的存在，这两个规则具有更高的特异性。

所以生成的文本将是大写的。

score 1 · Accepted Answer

#theID更特定于外部 div（直接样式，而不是继承样式），因此其中的所有文本都是黄色的。然而.aClass更具体到内部 div 所以它里面的所有东西都是绿色（直接样式）而不是黄色（继承样式）。

score 0 · Accepted Answer

浏览器从外部到内部元素收集/读取 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>

最后的元素风格总是会赢。

score 0 · Accepted Answer

每个元素都有所有的 CSS 属性。在这种情况下，有两个div元素，每个元素都有自己的color属性。这些属性在此处为两个元素明确设置，没有冲突的 CSS 规则，因此没有关于特异性或继承性的问题。

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

4 回答 4