Cssセレクタウェイトの問題
1005 ワード
Cssセレクタウェイトの問題
HTML+CSSを利用してウェブサイトを開発する際、CSSのセレクタには行間スタイル、IDセレクタ、classクラスセレクタ、ラベルセレクタなど、多くの種類があることはよく知られていますが、1つのラベルに複数のセレクタが含まれている場合、どのセレクタが役に立つのでしょうか.
たとえば、次のコードがあります.
CSS
もしそうなら、コードのDIVタグはいったいどのように表示されるべきですか?答えは400 pxに400 pxの赤い正方形を乗じたもので、なぜそうなったのか分からない人が多いかもしれませんが、以下にセレクタの重みをすべてリストします.
セレクタウェイト!important Infinity行間スタイル1000 id 100 class/属性/擬似クラス10ラベル/擬似要素1ワイルドカード0
このCSS重みテーブルからimportantの重みが最も大きく、Infinityで無限大を表し、ワイルドカードセレクタが最小で0であることがわかります.上記の例ではimportant、ラベル、id、class、行間スタイルがあるので、このCSS重みテーブルからどのcssセレクタの属性が明示されるべきかがわかります.
HTML+CSSを利用してウェブサイトを開発する際、CSSのセレクタには行間スタイル、IDセレクタ、classクラスセレクタ、ラベルセレクタなど、多くの種類があることはよく知られていますが、1つのラベルに複数のセレクタが含まれている場合、どのセレクタが役に立つのでしょうか.
たとえば、次のコードがあります.
CSS
もしそうなら、コードのDIVタグはいったいどのように表示されるべきですか?答えは400 pxに400 pxの赤い正方形を乗じたもので、なぜそうなったのか分からない人が多いかもしれませんが、以下にセレクタの重みをすべてリストします.
セレクタウェイト!important Infinity行間スタイル1000 id 100 class/属性/擬似クラス10ラベル/擬似要素1ワイルドカード0
このCSS重みテーブルからimportantの重みが最も大きく、Infinityで無限大を表し、ワイルドカードセレクタが最小で0であることがわかります.上記の例ではimportant、ラベル、id、class、行間スタイルがあるので、このCSS重みテーブルからどのcssセレクタの属性が明示されるべきかがわかります.