blog

CSSセレクタの優先順位

1.優先順位 2.比較ルール 優先順位はABCDの値で決まります:インラインスタイルがあればA=1、なければA=0; Bの値はIDセレクタの出現回数に等しい Cの値はクラスセレクタ、属性セレクタ、擬似...

May 2, 2020 · 1 min. read

優先順位

!important > インラインスタイル> IDセレクタ> クラス・セレクタ> タグ・セレクタ> ワイルドカードセレクタ

比較ルール

優先順位はABCDの値によって決まります:

インライン・スタイルが存在する場合は A = 1、そうでない場合は A = 0;

Bの値は、IDセレクタの出現回数と同じです。

Cの値は、クラス・セレクタ、属性セレクタ、擬似クラス・セレクタの出現回数の合計に等しくなります。

D の値は、ラベル・セレクタと擬似要素セレクタの出現回数の合計に等しくなります;

アルゴリズム:下4桁の数値が高いほど優先順位が高い

#id>div>span>a.cls

ABCDの値は上記のルールに従って求められます。

インラインスタイルはありません;

IDセレクターが1回表示され、B = 1;

クラス・セレクタは1回、属性セレクタは0回、擬似クラス・セレクタは0回、C=1;

タグ・セレクタは3回、擬似要素は0回、D = 3;

したがって、ABCDの値は0113です。

cssセレクタ解析の原則

右から左への解析!ノードのトラバーサルを減らします。

css提案

  • ワイルドカード * セレクタの使用は控えめに
  • IDセレクタは控えめに
  • div, span のような特定のセマンティック定義のないタグセレクタは使用しないでください。
Read next

三角形のCSS実装

cssの描画三角形の1、2は、cssのボーダーと04ボーダーの三角形の幅の高さの効果をシミュレートすることができます唯一のボーダーの色の必要性を保持するために、記述する必要があり、残りは省略することはできません、ブラウザの下位バージョンとの互換性のために透明に変更され、あなたが追加することができますフォントサイズ

May 1, 2020 · 1 min read