HTML フラグメントとセレクターを貼り付けてください。一致するかどうかはお使いのブラウザーの実装に従います。詳細度の要約はカスケード全体を解析したものではありません。
ブラウザ内でローカルに実行HTML フラグメントと CSS セレクターを貼り付けて「セレクターをテスト」を押します。フラグメントはページに接続されない独立したドキュメントとして解析され、セレクターはブラウザー自身の querySelectorAll で評価されるため、ここで一致するセレクターはブラウザーが受け付けるセレクターです。
概要には、最も詳細度が高いグループの詳細度、一致した要素数、カンマ区切りのグループ数が表示されます。各結果は tag#id.class と、その要素のテキスト先頭 150 文字で示されます。
a は ID セレクター、b はクラス・属性・擬似クラス、c は型セレクターと擬似要素を数えます。全称セレクターは 0 です: * は 0,0,0、.card > a#download は 1,1,1、ul li::before は 0,0,3、[href] は 0,1,0 です。
カンマ区切りのセレクターでは、最も詳細度が高いグループの値が表示されます。これはブラウザーがそのグループ内の宣言に適用する値です（a, #b は 1,0,0）。ここでは !important、@layer の順序、継承は考慮しないため、カスケードのシミュレーションではなく詳細度の集計です。
:not()、:is()、:has() は最も詳細度が高い引数の値になります: :is(#a, .b) は 1,0,0、:not(.a) は 0,1,0、:where(#a) は 0,0,0 です。:nth-child(2 of .a) は of の後ろのリストを加算するため 0,2,0 になります。
エスケープした文字は識別子の一部のままです（.a\.b は 1 つのクラスで 0,1,0）。名前空間の接頭辞は型セレクターではないため、svg|circle は型 1 つとして数えます。
フラグメントはスタイルシートなしで解析されるため、レイアウトも状態もありません。p:hover、p:visited、p:focus はここでは一致しません。フラグメント内のスクリプトは実行されず、画像も取得されません。
一致するかどうかはブラウザー次第です。Chrome は svg|circle と [href i] を拒否し、その場合は結果の代わりにブラウザーのエラーメッセージがそのまま表示されます。長いフラグメントも全体が処理されます（400 行の表で 400 件のカード）。