CSSの詳細度を計算し、どのルールが優先されるか確認
セレクタを貼り付けて詳細度を数えるか、CSSと要素を貼り付けて適用されるルールを確認します。
- お使いのデバイスで動作
- 会員登録不要
- 一度開けばオフラインでも使えます
モード
ブラウザの初期スタイルや他のスタイルシートは含まれません。何も送信されません。
| セレクタ | 詳細度 | 重み | コンテキスト |
|---|
| ルール | 値 | 詳細度 | レイヤー | 結果 |
|---|
CSSのどのルールが優先されるかを調べる方法方法
- モードを選びます：セレクタを数えるか、優先されるルールを探すか。
- セレクタを貼り付けるか、CSS・HTML・プロパティを入力します。
- スコアを確認するか、勝ったルールと、負けた各ルールの理由を読みます。
よくある質問
詳細度はどのように数えますか？
IDは1,0,0、クラス・属性・疑似クラスは0,1,0、要素名と擬似要素は0,0,1として数えます。全称セレクタ（*）と:where()は0として扱います。
:is()、:not()、:has()はどう数えますか？
引数の中で最も強いものとして数えます。たとえば:is(#a, .b) pは1,0,1になります。#aが:is()内で最も強い部分だからです。:where(#a) pのルールは0,0,1になります。
レイヤーに入ったルールが通常のルールに負けるのはなぜですか？
通常の宣言では、どのレイヤーにも属さないルールがレイヤー内のルールより優先されます。!importantの場合は順序が逆になり、先に定義されたレイヤーが勝ちます。通常のstyle属性は、通常のスタイルシートのすべてのルールより優先されます。!importantのstyle属性は、他のすべての!importantのルールより優先されます。
入力したCSSはどこかに送信されますか？
いいえ。ブラウザがこのタブ内でセレクタを解析して照合するだけで、サーバーには何も送信されません。
レビュー
まだレビューはありません。最初のレビューを書いてみましょう。