優先順位
!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 のような特定のセマンティック定義のないタグセレクタは使用しないでください。