CSSクラスが間違った順序で適用されています

Question

別に使用すると正常に動作するコードがあります。

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

今redの特性は、最初に適用されるblueによってその後​​によって上書き。最後にdivはblueです。

しかし、angular includeでHTMLファイルを参照するメインアプリケーションで同じコンテンツを読み込むと、CSSの順序が逆になります。

今すぐblueが適用されます。最初に適用されます。​​次にredによって上書きされます。今すぐdivはred

です。これはコードロジックを破っています。

誰かが考えていると考えられる理由は何ですか？今

Answer 1

redの性質は、CSSがどのように動作するかではありませんそれblue

によって、その後​​によって上書きされ、その後最初に適用されます。クラスリスト内のクラスの順序は、そのクラスが要素に適用する規則の優先順位とはまったく関係がありません。

CSSルールは、例えば、同一の特異性を有する他のルール（の（ないクラスリスト）相対ルール

CSS内のルールの順序の

• 特異によって適用されます後でルールはルールが!importantフラグthe specificationで

詳細を持っているかどうか）

を獲得します。

例：すべての3つのルールので、両方のdivは、最初はred green blueを有しているにもかかわらず、青色のテキスト（blueで指定された色）を有し、第二のblue green redを有すること

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

注同じ特異性を持っている場合、.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.greenが.blueよりも特異的であるためのdivは、代わりに青緑色今どのように注意してください、そうdiv.green CSSの後半に.blueがあるにもかかわらず、ルールは.blueルールよりも優先されます。