CSS 詳細度計算ツール

CSS セレクターの詳細度スコアを計算します。

クリックして試す:

h1 .title

(0,0,1,1)

インライン

クラス/属性/疑似

要素/疑似要素

#main .nav > a:hover

(0,1,2,1)

インライン

クラス/属性/疑似

要素/疑似要素

CSS 詳細度は、複数のルールが同じ要素に適用される場合にどのスタイルが優先されるかを決定します。

よくある質問

CSS 詳細度とは何ですか？

CSS 詳細度は各セレクターに与えられる重みです。スコアが高いほど優先されます。

詳細度の計算方法は？

4つの値として計算：インライン、ID数、クラス/属性/疑似クラス数、要素数。

何が優先されますか？

インライン > ID > クラス/属性/疑似 > 要素。!important はすべてを上書きします。

!important はいつ使うべきですか？

!important は CSS のメンテナンスを困難にするため、慎重に使用してください。

ユニバーサルセレクターは詳細度に影響しますか？

いいえ、* の詳細度はゼロです。

このツールを評価

3.7 / 5 · 68 件の評価