CSSのセレクタによる優先順位を分かりやすくビジュアル化するオンラインツール -Specificity Calculator

Specificity Calculator CSSの優先順位とは、例えば同じセレクタでスタイルを定義した場合、後に記述したものが適用されます。これは「後に記述したものが優先される」ということです。 例： <h1 class="title">見出し</h1> h1の見出しに、同じセレクタで異なるスタイルを適用してみます。 .title{ color:red; } .title{ color:blue; } この例では、後に記述した「color:blue;」が適用されます。 いわゆる、上書き状態です。 また、記述の順番には影響されず、セレクタのポイントにより優先順位が決まります。 ここで紹介する「Specificity Calculator」では、セレクタを入力するだけで、そのポイントをビジュアル化して優先順位が簡単に分かるようになります。 例： h1.title{ color:red; }

[tanakaBox]

http://www.w3.org/TR/css3-selectors/#specificity

[sivadselim]

CSSのセレクタによる優先順位を分かりやすくビジュアル化するオンラインツール -Specificity Calculator | コリス

[vent0819]

これはいいー

[Donca]

✔ CSSのセレクタによる優先順位を分かりやすくビジュアル化するオンラインツール -Specificity Calculator