CSSの特定性計算機

CSSセレクターを貼り付けて、その特異性スコアを確認したり、ヘッドツーヘッドを比較したり、どの1つのウィンが勝つかを理解します.

How to use CSS Specificity Calculator

1. 1 つ以上の CSS セレクターを入力ボックスに貼り付ける (行ごとに 1 つ).
2. 各セレクターの特異性は、ID、クラス、要素の内訳で、(a、b、c) トリプルとして表示されます.
3. 複数のセレクターを入力すると、勝者は「WINS」バッジで緑色に強調表示されます.
4. バーチャートを使用して、すべてのセレクター間での特定性を視覚的に比較します.
5. セレクターを編集し、結果をリアルタイムで確認します.

CSSの特定性計算機とは?

FAQ

(a,b,c) 数値はどういう意味ですか?

3つの数字は、ID セレクター(#id)、b = クラス数(.class)、属性([attr])、擬似クラス(:hover)、c = 要素名(div、p)、擬似要素(:before)のカウントを表します。 !important は、別の !important を除くすべてのものを打ち負かします.

:is() と :not() の特異性はどのように機能しますか?

CSS セレクター レベル 4 のスペックでは、 :is() と :not() は、最も特定の引数の特定性を取ります。 例えば、 :is(#id, .class) は、その引数の中で最も高い特異性(1,0,0)を持っています。 :has() は同じように動作します。 :where() は引数に関係なく常に (0,0,0) に貢献します.

!importantとは?

!重要宣言は、特異性に関係なく、通常の宣言をオーバーライドします。 2 !important 宣言の対立時、特異性はネクタイを破るために使用されます。 このツールは、ベースセレクタの特異性だけを計算します。それは!importantのアカウントではありません.

Related tools

• Box Shadow Generator
• CSS Gradient Generator
• CSS Minifier
• Glassmorphism Generator
• Neumorphism Generator