CSSカスケード・詳細度・継承の解決アルゴリズム

カスケードは「上位の段で差がついたら即決」のアルゴリズム

同じプロパティに複数の宣言が当たったとき、どれが勝つか。CSSのカスケード（cascade）は、複数の比較基準を厳密な優先順位の階段として持ち、上の段から順に比べて最初に差がついた段で決着させる辞書式（lexicographic）アルゴリズムです。詳細度（specificity）は強力な基準ですが、この階段の中ほどにある一段にすぎません。オリジンや !important が違えば、詳細度が 1,0,0,0 の宣言が 0,0,0,1 に負けることもあります。比較の順序は次のとおりです。

1. オリジンと重要度（origin & importance）
2. cascade layer（!important では順序が反転）
3. （ここまで同じなら）詳細度（specificity）
4. 出現順（order of appearance、後に書いた方が勝つ）

上から順に比べ、ある段で優劣がついた瞬間に下の段は見ません。たとえばオリジンが違えば詳細度も出現順も無関係に決まります。「詳細度を上げても効かない」という相談の多くは、実はより上の段（レイヤや !important）で既に負けているケースです。

オリジンと重要度：6段の優先順位

最上段の比較基準はオリジン（宣言の出どころ）と重要度（!important の有無）の組です。オリジンには user agent（ブラウザ既定）、user（ユーザー設定）、author（サイト作者）の3種があり、!important の有無と掛け合わせて6つの優先順位が定義されます。重要な点は、!important が付くと順序が反転することです。

通常宣言では author > user > user agent ですが、!important 付きでは user agent > user > author と逆転します。これは設計意図そのもので、ユーザーが視認性のために !important で上書きした指定を、作者の !important で握りつぶせないようにするためです。アクセシビリティの最後の砦がこの反転です。アニメーション中の宣言やトランジション中の値も、この階段の特定の位置に差し込まれます。トランジション中の値はすべての !important よりさらに上（最上段）に置かれ、アニメーション中の宣言は author !important の直下・author 通常宣言の直上に入ります。

cascade layer：詳細度より上で順序を支配する

CSS Cascade Level 5 で導入された **cascade layers（@layer）**は、オリジン×重要度が同じ宣言群を、詳細度より上の段で順序付けする仕組みです。これが効くのは「同じ author の通常宣言どうし」のような、従来なら詳細度勝負になっていた領域です。

@layer reset, framework, app;   /* 宣言順でレイヤの優先度が決まる */

@layer framework {
  .btn { color: blue; }         /* 詳細度 0,1,0 */
}
@layer app {
  a { color: green; }           /* 詳細度 0,0,1（より弱い）*/
}

author の通常宣言における優先度は、レイヤなし（unlayered）> 後で宣言したレイヤ > 先に宣言したレイヤの順です。上の例では app が framework より後なので、app レイヤの a { color: green } が、詳細度では上回る framework レイヤの .btn { color: blue } に詳細度を見るまでもなく勝ちます。詳細度はあくまで「同じレイヤ内」での最後のタイブレークに格下げされます。これがレイヤの核心で、低詳細度のリセットやライブラリを先頭レイヤに置けば、アプリ側は詳細度を盛らずに上書きできます。

詳細度：a,b,c の三つ組を辞書式に比較

オリジン・重要度・レイヤがすべて同じとき、初めて**詳細度（specificity）**が比較されます。詳細度はセレクタを (a, b, c) の3成分に数えた三つ組で、辞書式に大小を判定します。

比較は a を先に見て、同じなら b、さらに c、という辞書式です。b がどれだけ多くても a が1つ多い相手には勝てません（俗に「255進ではなく無限桁の辞書式」と言われる所以）。インラインスタイル（style 属性）はセレクタを持たないため詳細度の枠外で、author 宣言の中では実質最強の出現順位置に置かれます。!important は前述のとおり詳細度ではなく上位の重要度段で効くもので、「詳細度を無限大にする」わけではない点に注意してください。

#nav .item a       → a,b,c = 1,1,1
.menu .item.active → a,b,c = 0,3,0
→ a で 1 対 0、最初の桁で #nav 側が勝つ（b,c は見ない）

擬似クラスにも例外があります。:is() :has() :not() は引数内で最も詳細度の高いセレクタの値を採用し、:where() は引数が何であろうと詳細度を 0,0,0 に潰します。:where() は「マッチはさせたいが詳細度は上げたくない」リセットやデフォルト指定に有効です。

出現順：最後のタイブレーク

ここまでの段がすべて並んだ場合の**最終タイブレークが出現順（order of appearance）**です。原則は単純で、後に現れた宣言が勝つ。同一ファイル内なら下に書いた方、複数スタイルシートなら後で読み込まれた方が後勝ちです。@import で取り込んだ規則は、取り込み元のその位置に展開された順で並びます。よくある「同じセレクタを2回書いたら後者が効く」のは、オリジン・レイヤ・詳細度がすべて同点で、この出現順だけで決着している状態です。

同点（オリジン/レイヤ/詳細度がすべて等しい）なら:
  後に書いた宣言が勝つ
.btn { color: red; }
.btn { color: blue; }   ← こちらが採用される

継承と初期値：勝者を選んだ後の値の計算順序

カスケードはプロパティごとに勝者の宣言を1つ選ぶところまでです。その後、要素の各プロパティの**計算値（computed value）を確定する段が続きます。ここでカスケードの勝者がなければ、継承プロパティ（color、font-*、visibility など）は親要素の計算値を受け継ぎ、非継承プロパティ（margin、border、background など）は各プロパティの初期値（initial value）**になります。この「カスケード→継承/初期化」の順序が値解決の骨格です。

unset は「そのプロパティが本来継承するかどうか」に従って inherit か initial のどちらかに化けるショートカットです。revert はさらに踏み込み、現在のオリジンの宣言だけを無かったことにして、一段下のオリジン（author を捨てて user/UA）の結果を採用します。all: revert でその要素を実質ブラウザ既定の見た目へ戻せます。revert-layer はレイヤ単位の同種で、現レイヤの宣言を捨てて下位レイヤの結果へ巻き戻します。これらは「カスケードのどの段までやり直すか」を宣言側から指定する制御弁です。

まとめ