CSS 詳細度計算機 - Free Online Tool | PivaBox

CSS セレクタの詳細度を計算 — (a, b, c) の視覚的分解、比較モード、セレクタ説明付き

CSS 詳細度計算機の使い方

1. 入力フィールドに CSS セレクタ を入力または貼り付け — 例: ul li、.class、#id、.class1.class2、または div#id.class のような複合セレクタ
2. (a, b, c) の視覚的な内訳として表示される詳細度の結果を確認 — ID（a）、クラス/属性/疑似クラス（b）、要素/疑似要素（c）— 合計値は a*100 + b*10 + c で計算されます
3. オプションで比較モードを展開し、2つ目のセレクタを入力して、CSS カスケードでどちらが勝つかを確認。インラインスタイルと !important の注意事項もチェックしてください。

Frequently Asked Questions

CSS 詳細度計算機は無料ですか？

はい、PivaBox CSS 詳細度計算機は完全に無料でご利用いただけます。料金、サブスクリプション、隠れた費用は一切ありません。すべての計算はブラウザ内でローカルに実行されます。

詳細度はどのように計算されますか？

詳細度は3成分値 (a, b, c) として計算されます。<strong>a</strong> は ID セレクタ、<strong>b</strong> はクラスセレクタ・属性セレクタ・疑似クラス、<strong>c</strong> は要素セレクタ・疑似要素をカウントします。合計値は a*100 + b*10 + c です。値が大きいほどカスケードで優先されます。

!important とインラインスタイルはどうなりますか？

インラインスタイル（HTML要素のstyle属性）は、詳細度に関係なく常にスタイルシートルールを上書きします。!important フラグは通常の詳細度ルールを上書きします — !important ルールは非 !important ルールに勝ちます。2つの !important ルールが競合する場合は、通常の詳細度で勝者が決まります。このツールには両方のエッジケースを説明する注記が含まれています。