CSSセレクターの特異性を即座に計算します。セレクターの重み、優先度スコア、スタイルの競合を理解します。任意のCSSセレクターを入力すると、(a,b,c)形式で特異性値を表示します。無料でクライアントサイドで動作します。
CSS特異性計算機は、開発者がCSSセレクターの重みを理解し、比較するのに役立ちます。CSS特異性は、複数のルールが同じ要素を対象とする場合に、どのスタイルプロパティ値が適用されるかをブラウザが決定するために使用するアルゴリズムです。計算機は、任意のセレクターをインラインスタイル、ID、クラス/属性/疑似クラス、要素/疑似要素のコンポーネントに分解し、(a,b,c)の特異性値を計算します。特異性を理解することは、CSSの競合をデバッグし、メンテナンス可能なスタイルシートを作成するために不可欠です。
CSS特異性は、複数のルールが適用可能な場合に、ブラウザがどのCSSプロパティ値を要素に適用するかを決定するために使用するアルゴリズムです。3つの値のタプル(a, b, c)として計算されます: a = IDセレクターの数、b = クラスセレクター + 属性セレクター + 疑似クラスの数、c = 要素セレクター + 疑似要素の数。!important宣言は特異性を完全に上書きします。
特異性は、セレクター文字列内の各セレクタータイプの数をカウントして計算されます: (a) IDセレクター(#id)、(b) クラスセレクター(.class)、属性セレクター([attr])、疑似クラス(:hover)、(c) 要素セレクター(div)と疑似要素(::before)。!important宣言は特異性全体を上書きします。
IDセレクター(#id)は、どんなに多くのクラスセレクターでも常に上回ります。特異性は10進数ではなく、タプルだからです。(1, 0, 0)は常に(0, 100, 0)より大きいです。どんなに多くのクラスでも、単一のIDには勝てません。
いいえ、汎用セレクター(*)はゼロの特異性を持ち、特異性計算に寄与しません。