web-dev-qa-db-ja.com

複数の矛盾するCSSファイルを使用する場合の優先順位付けの順序

同じページで複数のcssファイルを使用し、それらが衝突する場合、どのファイルが使用されるかをどのように知ることができますか？たとえば、一方が青色のボディ背景を示し、もう一方が赤色を示す場合。

cssstylesheet
48
Filip Haglund

クイックアンサー：

CSSの両方の部分に同じ specificity がある場合（たとえば、両方ともbody{）、最後に呼び出された方が前のものを上書きします。

ただし、何かがより高い特異性（より具体的なセレクター）を持っている場合、順序に関係なく使用されます。

例1：

<div class="container">
    <div class="name">Dave</div>
</div>

<style>
    .name { color: blue; }
    .name { color: red; }
</style>

上記の例は、色を赤にします。両方のセレクターは同じであるため、同じ特異性もあります。また、CSSは上から下に読み取られるため、最初は青であると伝えますが、次に「ネバーマインド、赤にする」ことでそれをオーバーライドします。

例2：

<div class="container">
    <div class="name">Dave</div>
</div>

<style>
    #container .name { background-color: blue; }
    .name { background-color: red; }
</style>

上記の例では、セレクターが more "specific" であるため、最初は青でしたが、背景色を青にします。

例外（!important）：

！important を含めると、特異性と順序の両方がオーバーライドされますが、私の意見では、変更するアクセス権がないサードパーティのコードを台無しにしようとしている場合にのみ使用する必要がありますそれ以外の方法。

外部CSS：

上書きルールは、外部CSSファイルでも同じように機能します。それらを最初から最後、上から下に置くことを想像してください。最初のファイルで呼び出されたセレクターは、後続のファイルの同一仕様セレクターによって上書きされます。ただし、同じファイル内または複数のファイル内の順序は、依然として特異性によって決まります。

テスト方法：

Chrome、Firefox、およびIE（おそらくSafariも）の最新バージョン）では、何かを右クリックして[要素の検査]をクリックできます。これにより、HTMLと適用されたCSSが表示されますCSSを下にスクロールすると（通常は右側）、取り消し線が引かれています-これは、CSSが正しくないか、上書きされていることを意味します。テストするには、CSSセレクター（独自のコードを作成するか、デベロッパーツールボックスに直接入力して）、より具体的にし、それが取り消し線を引くかどうかを確認します...などそのツールで遊んでみてください-非常に役立ちます。

78
Dave