CSS 詳細度カリキュレーター - どのセレクタが勝つか、なぜスタイルが効かないかを理解

CSS 詳細度について

詳細度が決めること

2 つの CSS ルールが同じ要素の同じプロパティを指定するとき、ブラウザには決着の基準が必要です。それが詳細度です。各セレクタは a, b, c の 3 つの数字で表される重みを持ちます。左から順に比較し、大きい方が勝ちます。完全に同じときだけ、ソース順（または !important）で決まります。だから、より具体的なルールが書いたばかりのルールをひそかに上書きするのです。

3 つの列

a 列は ID セレクタ、b 列は class・属性・pseudo-class、c 列は要素型・pseudo-element を数えます。全称セレクタ・結合子・:where() は加算されません。:is()・:not()・:has() は最も具体的な引数の詳細度を寄与します。このツールは各トークンを色分けし、どの列に加わるかを見せます。

よくある質問

このテーマに関するよくある疑問と回答をまとめました。

なぜ私の CSS が適用されないのですか？

たいていは同じ要素を指す別のルールの詳細度が高く、あなたのが後にあっても勝ってしまいます。両方のセレクタをここに貼り、(a, b, c) の重みを比べれば、どの列で決まるか分かります。

:where() と * はなぜ 0 なのですか？

:where() は詳細度を加えないよう設計されており、中身を上書きしやすくします。全称セレクタ * と結合子も加算しません。対して :is() と :not() は最も具体的な引数の詳細度を取ります。

入力したセレクタはサーバーに送信されますか？

いいえ。解析と比較はすべてブラウザ内で実行され、入力した内容が端末外に出ることはありません。