以错误顺序应用CSS类

Question

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

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

现在的red性质首先应用然后通过​​覆盖然后通过blue。最后，div是blue。

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

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

这是打破代码逻辑。

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

Answer 1

现在的red属性首先应用然后通过重写然后​​通过blue

这不是CSS如何工作。类列表中的类的顺序与这些类应用于元素的规则的优先级没有任何关系。

CSS规则由

• 规则
• 在CSS规则的秩序的特异性（而不是类列表）相对于具有相同特异性的其他规则（例如应用，后面的规则赢）
• 无论规则在the specification的!important标志

更多。

例子：

.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中。