web-dev-qa-db-ja.com

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

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関数と同じようにスタイルシート参照の点で同じように機能しますか？最後の行が表示されていることを意味しますか？

cssoverridingstylesheet
143
ian5v

CSSルールのカスケードのルールは複雑です-ひどく言い換えるのではなく、単にスペックを参照します。

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

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

148
duskwuff

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

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

div {
  color: red;
}

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

div {
  color: red;
}

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

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

27
Blender

順序は重要です。複数のオカレンスの最後に宣言された値が取得されます。私が試したのと同じものをご覧ください： http://jsfiddle.net/Wtk67/

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


<style>
    .test{
        color:blue;
    }

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

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

23
Roy M J

最後の読み込み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です。

15
Doodl

例でカスケードルールを単純化してみましょう。規則は、より一般的なものになります。

  1. IDの1つのルールを最初に適用します（順序に関係なくクラスおよび/または要素に対して）
  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>要素が含まれますが、最後に宣言されたスタイルが有効になります。この場合、3番目のh2要素のarticle h2 { .. }です。

IE11の結果は次のとおりです：（画像を投稿するための十分な権限がありません）

enter image description here

7
Kagan Agun

ロード順序と、各スタイルに適用される実際のルールの特異性の両方に依存します。質問のコンテキストを考えて、最初に一般的なリセットをロードし、次にページ固有のものをロードします。その後、目的の効果がまだ表示されない場合は、他の人がすでに指摘しているように、関連するセレクターの特異性を調べる必要があります。

6
prodigitalson

はい、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.cssが2番目のスタイルシートになり、master.cssからの同じ特定のルールが上書きされます。

展開する前に、すべてのルールを1つのシートにまとめる（および縮小する）のが最適です。

1
n_i_c_k

最善の方法は、可能な限りクラスを使用することです。とにかくIDセレクター（＃）は避けてください。単一のクラスのみを使用してセレクターを作成すると、CSSの継承がずっと簡単になります。

更新：この記事でCSSの特異性の詳細をご覧ください： https://css-tricks.com/specifics-on-css-specificity/

0
Jeroen Ooms

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

0
user3094826