他のファイルよりも1つ上のファイルのCSS設定の優先順位付け

Question

質問は簡単です。メインHTMLに含まれる2つのファイル間の競合する競合するCSSプロパティが解決され、2つのファイルのいずれかの設定が優先されるようにすることは可能ですか？

私は

<link href="A.css" rel="stylesheet" type="text/css"> 
<link href="B.css" rel="stylesheet" type="text/css"> 

を持っており、Bが含まれているのに対し、Aは

body{ 
    color: #000000; 
} 

は私が何とか両方のファイルに存在するすべての設定が得ることを示すことができ

body{ 
    color: #ffffff; 
} 

のようなものが含まれている場合そのプロパティは、例えば、ファイルからですか？

SASSやLESSのようなエンジンでこれが可能ですか？

Answer 1

Aファイルでは、おそらく！importantを使用しますか？私はこれがCSSファイル全体で動作するかどうかはわかりませんが、これを試すことができます。

body{ 
    color: #ffffff !important; 
} 

これを使用することを避けることをお勧めしますが、それはうまくいく場合があります。なぜ重要でないのか、それをいつ使うべきかを説明する回答hereがあります。

Answer 2

CSSはカスケーディングスタイルシートの略語です。つまり、最後のルールは常に最初のルールを無効にします。ブラウザはまずA.cssのルールを解釈して適用し、B.cssのルールを解釈して適用し、A.cssのルールを上書きします。

ルールを1つのファイルに書き込むと同じことが起こります。

したがって、たとえば：

body { 
    background-color: red; 
} 

body { 
    background-color: blue; 
} 

はbackground-color青を返します。スタイルを複数のスプレッドシートに分割するか、1つのファイルに書き出す場合も同じことが起こります。

ここではCascading and inheritanceについて詳しく読むことができます。

SASSまたはLESSはこれをCSSにコンパイルすると変更できません.SSS/LESSではCSSでできないことはできません。基本的には、より効率的なコードを記述してCSSにコンパイルするのに役立つツールです。

スタイルシートをマークアップ内の特定の設定（モバイルデバイスのみ）に適用するように指定することも、!important CSSプロパティを使用して常に適用するルールをマークすることもできます。