外部CSSファイルのロード順

Question

外部CSSファイルの特定のロード順を保証する方法はありますか？通常、パフォーマンスのために複数の外部スタイルシートを非同期に読み込むことができますが、個々のユーザーがプロジェクトのドキュメントのデフォルトスタイルシートをオーバーライドできるようにしたい（同僚は色盲ですが、ライブラリの他のユーザーにとって便利なようです）を個人的な好みで使用する。

たとえば、のは、私はドキュメントでこれを持っているとしましょう：

<link rel="stylesheet" type="text/css" href="https://foo.bar/project_stylesheet.css"> 
<link rel="stylesheet" type="text/css" href=".localprefs.css"> 

望ましい結果は.localprefs.cssは（存在する場合）常にグローバルプロジェクトのスタイルシートをオーバーライドするべきであるということです。

ロードオーダーに依存しない評価オーダーのは保証はありますか？そうでない場合は、問題を強制する簡単な方法がありますか？

編集時：.localprefs.cssは、グローバルスタイルシートの選択されたスタイルをオーバーライドすることを前提としています。

Answer 1

ロードオーダーを保証する方法はありますか。最後にロードされたファイルまたはCSSが優先されます。

つまり、読み込み順ではCSSのルールの特異性については言及していません。

あなたは要素が<h1 id="foo" class="bar">だと言います。最初のスタイルシートが#foo { color: red; }で、最後のスタイルシートが.bar { color: blue; }の場合、h1の色は、クラスに優先するIDの特異性のために赤色になります。あなたは、CSSがロードされた順序で特定性を強制することはできません。特異性を強制するには、!importantを使用できます。

Answer 2

はい。それは、ファイル内にある順にロードされます。したがって.localprefs.cssは2番目に読み込まれます。

最初のファイルのセレクタがより具体的な場合は、それでも優先されます（つまり、#idと.class）。しかし、結びつきは後のファイルで勝ちます（つまり、.class対.class）