CSSスタイルシートはどの順序でオーバーライドしますか？

157

HTMLヘッダーには、これがあります。

<head>
<title>Title</title>
<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>

styles.css私のページ固有のシートです。master.cssブラウザのデフォルトを上書きするために各プロジェクトで使用するシートです。これらのスタイルシートのどれが優先されますか？例：最初のシートには特定のものが含まれています

body { margin:10px; }

関連するボーダーですが、2番目には私のリセットが含まれています 

html, body:not(input="button") {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

本質的に、CSSのカスケード要素は、スタイルシートの参照に関して、通常のCSS関数と同じように機能しますか？最後の行が表示されたものであることを意味しますか？

css  overriding  stylesheet 
— ian5v
ソース
これがWebマスターに適していることに気づきました。これを投稿するのにより良い場所がありますか？
— ian5v 2012
10
ここがいいです
— Blender 2012
4
body:not(input="button")ところで、有効なセレクタではありません。あなたはおそらくそれをに分割するつもりbody, input:not([type="button"])でした。
— BoltClock
それは面白い。以前にそのような構文を見たことがあるとは思いません。私はまだ新しいですが、これらの二重括弧は私にとっては外国のものです。
— ian5v
これらのブラケットは属性セレクター用です：developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors @topic：おそらくあなたはスタイルシートの順番を入れ替えたいでしょう：将軍master.cssが最初にロードするべきで、それを却下する方がずっと簡単ですのマスタースタイルstyles.css。
— 16

回答:

163

CSSルールのカスケードのルールは複雑です-それらをひどく言い換えようとするのではなく、単に仕様を参照します。

http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

つまり、より具体的なルールがより一般的なルールをオーバーライドします。特異性は、含まれるID、クラス、および要素名の数と、!important宣言が使用されたかどうかに基づいて定義されます。同じ「特異性レベル」のルールが複数存在する場合は、最後に出現した方が優先されます。

— duskwuff -inactive-
ソース
1
次に、スタイルシートをロードする順序について特定のルールはありませんか？CSSが具体的にどのように表示されるかは理解していますが、オーバーライドしない限り、マスターシートが読み込まれると想定します。
— ian5v
11
実際に!importantは、カスケードに直接参加し、特異性とは何の関係もありません。!important特性はセレクターに関連していますが、プロパティ宣言で使用されます。（つまり、ルールは複雑であると言うのは
— 正解
2
では、スタイルシートは要素と同じ方法でロードされますか？それらが同じ特異性のものである場合、最後が優先されますか？
— ian5v 2012年
3
@iananananan：基本的に、ブラウザーは個々のスタイルシートの観点からCSSを見ることはありません。複数のスタイルシートがある場合、それらはすべて1つの巨大なスタイルシートであるかのように扱われ、ルールはそれに応じて評価されます。
— BoltClock
2
@ user34660 BoltClockのコメントは、CSSスタイルの観点からのものです。スタイルシートがDOM内で分離されていることは正しいですが、その分離はそれらのスタイルがどのように適用されるかに影響しません。
— duskwuff -inactive- 2016
31

最も具体的なスタイルが適用されます。

div#foo {
  color: blue; /* This one is applied to <div id="foo"></div> */
}

div {
  color: red;
}

すべてのセレクターが同じ特異性を持つ場合、最新のdeclerationが使用されます。

div {
  color: red;
}

div {
  color: blue; /* This one is applied to <div id="foo"></div> */
}

あなたの場合、body:not([input="button"])はより具体的であるため、そのスタイルが使用されます。

— ブレンダー
ソース
1
その最後のセレクターに関する質問についての私のコメントを参照してください。
— BoltClock
1
特殊性のルールにより、編集不可能なスタイルシートをオーバーライドする必要がある場合、事態が困難になります。
— 2015
23

順序は重要です。複数発生の最後に宣言された値が取得されます。私が解決した同じものを見てください：http : //jsfiddle.net/Wtk67/

<div class="test">Hello World!!</div>


<style>
    .test{
        color:blue;
    }

    .test{
        color:red;
    }
</style>

の順序を入れ替える.test{}と、CSSで宣言された最後のHTMLの値をHTMLが取ることがわかります

— ロイMJ
ソース
3
したがって、最も具体的なCSSを最後に追加する必要があります。
— live-love
17

最後に読み込まれるCSSはTHE MASTERで、同じCSS設定ですべてのCSSをオーバーライドします

例：

<head>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/master.css">
</head>

reset.css

h1 {
    font-size: 20px;
}

master.css

h1 {
    font-size: 30px;
}

h1タグの出力はfont-size：30pxになります。

— ドゥドル
ソース
1
こんにちは。私の場合、最初に定義されたもの.cssが最後に読み込まれます。読み込まれた順に適用されますか、それとも定義された順に適用されますか？
— Eugen Konkov
ありがとう、これはまさに私が探していた説明です。
— HunterTheGatherer
7

例を使用して、カスケードルールを簡略化してみましょう。ルールはより一般的なものになります。

  1. 最初にIDのルールを適用します（順序に関係なく、クラスや要素に対して）
  2. 順序に関係なく要素にクラスを適用します
  3. クラスまたはIDがない場合、一般的なものを適用します
  4. 同じグループ/レベルに対して、最後のスタイル（ファイルの読み込み順序に基づく宣言の順序）を適用します。

これがcssとhtmlコードです。

<style>
    h2{
        color:darkblue;
    }
    #important{
        color:darkgreen;
    }
    .headline {
        color:red;
    }
    article {
        color:black;
        font-style:italic;
    }
    aside h2 {
        font-style:italic;
        color:darkorange;
    }
    article h2 {
        font-style: normal;
        color: purple;
    }
</style>

これがCSSスタイルです

<body>
<section>
    <div>
        <h2>Houston Chronicle News</h2>
        <article>
            <h2 class="headline" id="important">Latest Developments in your city</h2>
            <aside>
                <h2>Houston Local Advertisement Section</h2>
            </aside>
        </article>
    </div>

    <p>Next section</p>
</section>

これが結果です。スタイルファイルの順序やスタイル宣言に関係なくid="important"、最後に適用されます（最後に宣言されているclass="deadline"が、効果はありません）。

<article>要素が含まれている<aside>が、最後に宣言スタイルが、この場合には、有効になり、要素をarticle h2 { .. } 第三H2要素に。

IE11での結果は次のとおりです：（画像を投稿するのに十分な権限がありません）DarkBlue：ヒューストンクロニクルニュース、DarkGreen：あなたの街の最新動向、紫：ヒューストンローカル広告セクション、黒：次のセクション

ここに画像の説明を入力してください

— カガンアグン
ソース
6

これは、読み込み順序と、各スタイルに適用される実際のルールの具体性の両方に依存します。質問のコンテキストを前提として、まず一般的なリセットをロードし、次にページ固有のものをロードします。次に、意図した効果がまだ表示されない場合は、他の人がすでに指摘しているように、関係するセレクターの具体性を調べる必要があります。

— プロデジタルソン
ソース
2

編集：@LeeCのコメントによると、2020年4月、これはもはやそうではありません

はい。ただし、1枚のシートと同じように機能します。

注文事項をロードしてください！

<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>

上記のコードでは、のmaster.css後に読み込まれる保証はありませんstyles.css。したがって、master.cssが迅速に読み込まれ、styles.css時間がかかる場合はstyles.css2番目のスタイルシートになり、からの同じ特定性のルールはmaster.css上書きされます。

展開する前に、すべてのルールを1つのシートに入れて（そして縮小して）おくのが最善です。

— n_i_c_k
ソース
スマートフォンとタブレットに固有のスタイルシートをロードするための条件付きメディア属性を含む、ページの<head>セクションからロードされた代替のほぼ同一のスタイルシートの場合を考えてみてください。この場合、メディアで指定されたロジックは、ロード順序が不定の場合、スタイルシートごとに厳密に排他的でなければなりません。
— Lindsay Haisley
@n_i_c_k答えが間違っています。重要なのは宣言の順序であり、ロードの順序ではありません。のダウンロードを停止し、完全にロードさmaster.cssせることで、Fiddlerでこれをテストしましたstyles.css。その後、master.cssロードさせます。master.cssまだ適用されている「重複」スタイル-レンダリングはmaster.cssロードされて解析されるまでブロックされました。 注：私はstyles.css` を試してみrel=preloadましたmaster.css' (no halting) and that apparently alters its _declaration_ order by hoisting it above 。
— LeeC
@LeeCに感謝します。執筆時点では私の答えは正しかったことがわかっていますが、今は修正されていると私はあなたの言葉を信じて、私の答えを編集します。
— n_i_c_k
1

最善の方法は、クラスをできるだけ使用することです。いずれにしても、IDセレクター（＃）は使用しないでください。単一のクラスだけでセレクターを作成する場合、CSSの継承はずっと簡単です。

更新：CSSの詳細については、この記事をご覧ください：https : //css-tricks.com/specifics-on-css-specificity/

— Jeroen Ooms
ソース
1
これはCSSの特定性に関するすばらしい記事です：css-tricks.com/specifics-on-css-specificity
— Jeroen Ooms
0

あなたの質問から、重複する選択、すべてのページに適用されるマスターセット、および個々のページごとにマスター値を上書きする特定のセットがあると思われます。その場合、注文は正しいです。マスターが最初にロードされ、後続のファイルのルールが優先されます（それらが同一であるか、または同じ重みを持つ場合）。このウェブサイトのすべてのルールの非常にお勧めの記述がありhttp://vanseodesign.com/css/css-specificity-inheritance-cascaade/私は、フロントエンドの開発を始めたときには、このページには、非常に多くの疑問をクリア。

— ユーザー3094826
ソース
0

宣言の優先順位を定義するのはカスケードです。公式仕様をお勧めできます。この部分は読みやすくなっています。

https://www.w3.org/TR/css-cascade-3/#cascading

以下は、優先度の降順でソートに影響を与えます。

  1. 起源と重要性の組み合わせ：

    1. Transition 宣言
    2. でマークされたユーザーエージェントの宣言 !important
    3. でマークされたユーザーの宣言 !important
    4. でマークされたページ作成者の宣言 !important
      1. style属性を持つ要素の定義
      2. ドキュメント全体の定義
    5. Animation 宣言
    6. ページ作成者の宣言
      1. style属性を持つ要素の定義
      2. ドキュメント全体の定義
    7. ユーザーの宣言
    8. ユーザーエージェントの宣言

  2. 2つの宣言は同じ起源と重要性を持っている場合は、特異性、要素が定義されている方法を明確に意味は、得点を計算し、場に出ました。

    • 識別子ごとに100ポイント（#x34y）
    • クラスごとに10ポイント（.level）
    • 要素タイプごとに1ポイント（li）
    • すべての疑似要素（:hover）を除く1ポイント:not

    たとえば、セレクターmain li + .red.red:not(:active) p > *の仕様は24です。

  3. 外観の順序は、二つの定義が同じ起源、重要性と特異性を持っている場合のみ、役割を果たしています。後の定義は、ドキュメント内の前の定義に先行します（インポートを含む）。

— マイケル・シュミット
ソース
0

コードを実行すると、コードは上から下に読み込まれると思います。つまり、最後のCSSリンクは、その上のスタイルシートの同様のスタイルをオーバーライドすることになります。

たとえば、2つのスタイルシートを作成した場合 

<link rel="stylesheet" href="style1.css"> 
<link rel="stylesheet" href="style2.css">

これらの両方で、本体のbackground-colorを2つの異なる色に設定します。style2.cssの本体の色が優先されます。

優先する!IMPORTANTクラススタイル内で使用するか、<link>注文を並べ替えることで、スタイルの優先順位の問題を回避できます。

— エンナム・ホケ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.