CSS スタイルの優先順位

作成するスタイルシートが複雑になるにつれて、あるタグのスタイルはますます多くの影響を受けるようになります。その影響は周囲のタグから来ることもあれば、そのタグ自身から来ることもあります。以下では、この2つの側面から CSS スタイルの優先順位を見ていきます。

CSS の継承性

CSS の継承特性とは、あるタグに適用された CSS プロパティがその子タグに引き継がれることを指します。次の HTML 構造を見てください：

<div>
    <p></p>
</div>

もし<div>あるプロパティを持っている場合color: red、そのプロパティは<p>継承され、つまり<p>同様にそのプロパティを持ちますcolor: red。

以上からわかるように、ウェブページが複雑で HTML 構造のネストが深い場合、あるタグのスタイルはその祖先タグのスタイルから大きな影響を受けます。影響の規則は次のとおりです：

CSS優先規則1：最も近い祖先のスタイルは、他の祖先のスタイルよりも優先順位が高くなります。

例1：

<!-- 类名为 son 的 div 的 color 为 blue -->
<div style="color: red">
    <div style="color: blue">
        <div class="son"></div>
    </div>
</div>

あるタグが祖先から継承したが、そのタグ自身にはないプロパティを「祖先スタイル」と呼ぶなら、「直接スタイル」とはタグが直接持っているプロパティのことです。さらに次のような規則があります：

CSS優先規則2：「直接スタイル」は「祖先スタイル」よりも優先順位が高くなります。

例2：

<!-- 类名为 son 的 div 的 color 为 blue -->
<div style="color: red">
    <div class="son" style="color: blue"></div>
</div>

セレクタの優先順位

上では、タグが祖先から継承したプロパティについて説明しました。ここでは、タグ自身が持つプロパティについて説明します。CSS の優先順位を説明する前に、CSS の7つの基本セレクタを紹介します：

ID セレクタ、例： #id{}
クラスセレクタ、例： .class{}
属性セレクタ、例： a[href="segmentfault.com.html"]{}
疑似クラスセレクタ、例： :hover{}
疑似要素セレクタ、例： ::before{}
タグセレクタ、例： span{}
ユニバーサルセレクタ、例： *{}

CSS優先規則3：優先順位の関係：インラインスタイル > ID セレクタ > クラスセレクタ = 属性セレクタ = 疑似クラスセレクタ > タグセレクタ = 疑似要素セレクタ

例3：

// HTML
<div class="content-class" id="content-id" style="color: black"></div>

// CSS
#content-id {
    color: red;
}
.content-class {
    color: blue;
}
div {
    color: grey;
}

最終的な color は black になります。インラインスタイルが他のセレクタよりも優先順位が高いためです。

すべての CSS セレクタは、上記の7つの基本セレクタを単独で使用するか、組み合わせて作られます。組み合わせ方は次の3つです：

子孫セレクタ： .father .child{}
子セレクタ： .father > .child{}
隣接セレクタ： .bro1 + .bro2{}

あるタグが同時に複数のセレクタで選択される場合、それらのセレクタの優先順位を決定する必要があります。次のような規則があります：

CSS優先規則4：セレクタ内の ID セレクタの個数（a）を数えます。セレクタ内のクラスセレクタ、属性セレクタ、疑似クラスセレクタの個数の合計（b）を数えます。セレクタ内のタグセレクタと疑似要素セレクタの個数の合計（c）を数えます。a、b、c の順に大小を比較し、大きい方が優先順位が高く、等しければ次の値を比較します。最終的に2つのセレクタの a、b、c がすべて等しい場合は、「近接原則」に従って判断します。

例4：

// HTML
<div id="con-id">
    <span class="con-span"></span>
</div>

// CSS
#con-id span {
    color: red;
}
div .con-span {
    color: blue;
}

規則4からわかるように、<span> の color は red になります。

外部スタイルシートと内部スタイルシートのスタイルが競合した場合はどうなるのでしょうか。これは、HTML ファイル内でのスタイルシートの位置に関係しています。スタイルが適用される位置が下にあるほど優先順位が高くなります。実はこれも規則4で説明できます。

例5：

// HTML
<link rel="stylesheet" type="text/css" href="style-link.css.html">
<style type="text/css">
@import url(style-import.css); 
div {
    background: blue;
}
</style>

<div></div>

// style-link.css
div {
    background: lime;
}

// style-import.css
div {
    background: grey;
}

順序から見ると、内部スタイルが一番下にあり、最後に参照されるため、<div> の背景色は blue になります。

上記のコードでは、@importステートメントは内部スタイルの前に記述しなければなりません。そうしないとファイルの読み込みが無効になります。もちろん、@importの方法で外部スタイルシートファイルを参照することは推奨されません。理由は別のブログを参照してください：CSS の導入方式。

CSS には、上記の規則を完全に無視できる方法も用意されています。ある特定のプロパティを必ず適用したい場合は、このテクニックを使用できます。

CSS優先規則5：プロパティの後ろに!importantが挿入されたプロパティは最も高い優先順位を持ちます。同時に!importantも挿入されている場合は、規則3と4を使って優先順位を判断します。

例6：

// HTML
<div class="father">
    <p class="son"></p>
</div>

// CSS
p {
    background: red !important;
}
.father .son {
    background: blue;
}

.father .son の方がより高い重みを持っていますが、セレクタ p の background プロパティに !important が挿入されているため、<p> の background は red になります。

誤った説明

CSS の学習中に、「セレクタの重み付け」という説を聞いたことがあるかもしれません。ID セレクタの重みは100、クラスセレクタは10、タグセレクタは1であり、それらを合計して大小を比較するというものです。この理解方法は表面的には覚えやすいですが、実際には間違っています。

例を挙げると、2つのセレクタがあります：

.class1.class2.class3 ... （共11个类）
#id

「加法」の方法で計算すると、前者の重みは110、後者は100になるため、前者が勝つと思うでしょう。しかし実際には、ブラウザは後者のスタイル（#id のもの）を選択します。

なぜでしょうか？CSS はセレクタの重みを「10進数の加算」として扱っているわけではないからです。CSS の優先順位の比較は本質的に段階ごとの比較であり、4桁の数値の比較と理解できます：

インラインスタイル：1,0,0,0
ID セレクタ：0,1,0,0
クラスセレクタ、属性セレクタ、疑似クラスセレクタ：0,0,1,0
タグセレクタ、疑似要素セレクタ：0,0,0,1

ブラウザは左から右へ順に比較するのであって、合計しません。クラスセレクタがいくつあっても、1つの ID セレクタには及びません。

したがって、「100+10+1」のような計算方法はやめましょう。重みは足し算ゲームではなく、構造の段階ごとの比較です！