javascript - 以错误的顺序应用的 CSS 类

Question

我有一个单独使用时工作正常的代码。

<div class="red green blue"> </div> 

现在 red 的属性首先被应用，然后被 green 覆盖，然后被 blue 覆盖。最后，div 是blue。

但是，当我通过 angular include 在引用 HTML 文件的主应用程序中加载相同的内容时，CSS 的顺序被颠倒了。

现在 blue 首先被 green 覆盖，然后被 red 覆盖。现在 div 是 red

这破坏了代码逻辑。

如果有人有想法，可能的原因是什么。

Answer 1

Now properties of red are applied first then overridden by green then by blue

那不是 CSS 的工作方式。类列表中类的顺序与这些类应用于元素的规则的优先级无关。

CSS 规则被应用于

• 规则的特殊性
• 规则在 CSS(不是类列表)中相对于具有相同特异性的其他规则的顺序(例如，较晚的规则获胜)
• 规则是否有!important标志

更多信息 the specification .

例子:

.red {
  color: red;
}
.green {
  color: green;
}
.blue {
  color: blue;
}

<div class="red green blue">red green blue</div>
<div class="blue green red">blue green red</div>

请注意，两个 div 都有蓝色文本(由 blue 指定的颜色)，即使第一个是 red green blue 而第二个是 blue green red ，因为这三个规则都具有相同的特异性，.blue 规则是 CSS 中的最后一条规则，它们都没有被标记为 !important。

相比之下，让我们使 .green 规则更具体:

.red {
  color: red;
}
div.green {
  color: green;
}
.blue {
  color: blue;
}

<div class="red green blue">red green blue</div>
<div class="blue green red">blue green red</div>

注意 div 现在是绿色而不是蓝色，因为 div.green 比 .blue 更具体，所以 div.green 规则优先于 .blue 规则，即使 .blue 位于 CSS 的后面。