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関数と同じように機能しますか？最後の行が表示されたものであることを意味しますか？

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

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

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

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

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"])はより具体的であるため、そのスタイルが使用されます。

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

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


<style>
    .test{
        color:blue;
    }

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

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

最後に読み込まれる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. 最初に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：あなたの街の最新動向、紫：ヒューストンローカル広告セクション、黒：次のセクション

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

編集：@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つのシートに入れて（そして縮小して）おくのが最善です。

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

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

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

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

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

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

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

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

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

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