Question

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

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

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

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

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

这打破了代码逻辑。

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

Answer 1

现在首先应用red的属性，然后由green覆盖blue

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

CSS规则由

应用

示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

相反，让我们使.green规则更具体：

＆＃13;

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

＆＃13;

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

＆＃13;

请注意div现在是绿色而不是蓝色，因为div.green比.blue更具体，因此div.green规则优先于.blue规则，即使.blue稍后会出现在CSS中。