オープニング・クラップ
久しぶりの投稿で、最近の経験はあまり楽しいものではありませんでした。しばらくしたら、自分を励ますために技術的でない要約を書くかもしれません。
なぜCssセレクタについて書いたのですか？主な理由は、最近仕事でベーススタイルをカプセル化する必要性に出くわしたからで、さらにいくつかの要件があり、そのうちの1つはスタイルが低重量であることでした。最初はとても単純なことだと思っていましたし、よくよく考えてみると、セレクタの基本的な優先順位についてはまだ理解できていることがわかりました。しかし、複雑なセレクタの優先順位の計算については、自分でもよくわかりません。そこで、このような簡単な小記事があるので、ちょっと自分に櫛を与えてみます。
、基本セレクタタイプ
一般的なセレクタには、大まかに言って次のような種類があります：
- ID
- class
- 属性セレクタ
- 擬似クラスセレクタ
- ラベルセレクタ
- 疑似要素セレクタ
- グローバルセレクタ
最初のいくつかは、フロントエンド開発者にとっては非常に馴染み深いものです。少し補足すると、擬似要素セレクタとは何でしょうか？名前を聞いただけで、とても混乱してしまいます。実際、:beforeと:afterという栗をあげると、これも非常に一般的なものです。グローバルセレクタは、実際には、任意の要素の代わりに*です。
基本的な優先順位関係
基本的な優先順位は、関係の深い順に以下の通り：
IDセレクタ > classセレクタ、属性セレクタ、擬似クラス・セレクタ > タグ・セレクタ、擬似要素セレクタ > グローバル・セレクタ
説明を簡単にするために、セレクタを4つのレベルに分けました：
- レベル1：IDセレクタ
- レベル2：クラス・セレクタ、属性セレクタ、擬似クラス・セレクタ
- レベル3：ラベルセレクタ、擬似要素セレクタ
- レベル4：グローバル・セレクター
同じレベルのセレクタは同じ優先順位を持ちます。同じ優先順位を持つセレクタの場合、主にコード内のセレクタの順序に依存します。つまり、同じ優先順位を持つ複数のセレクタが同じスタイル属性を定義した場合、次に高い順位を持つセレクタのスタイルが有効になります。
次に、!important はスタイルの優先順位を変更し、style 属性の優先順位を最も高くすることができます。しかし、これは特定のスタイルに対するものであり、セレクタに対するものではありません。
注：レベルという概念は実際にはセレクタには存在しません。
複雑な優先順位計算
仮説：
- 第一レベルのセレクタの数は
- 第2レベルのセレクタの数は
- 第3レベルのセレクタの数はc
- 第4レベルのセレクタは
第一レベルのセレクタの数を比較することが優先され、その数が同じであれば、第二レベルのセレクタの数を比較するというようになります。もし数がすべて同じなら、コード内のセレクタの順番によります。
栗をひとつ：
#id.a.b.c {} // {a=1, b=3, c=0}
#id.a.c {} // {a=1, b=2, c=0}
上の2つのセレクタはa値が等しく、続けてb値を比較します。最初のセレクタの b 値は、2 番目のセレクタの b 値よりも大きいです。したがって、最初のセレクタの style 属性の優先順位が高くなります。
誤解
セレクタの優先順位を計算するとき、第1レベルのセレクタの重みは100、第2レベルのセレクタの重みは10、第3レベルのセレクタの重みは1であるという議論があります。
しかし今、クラスに対して1つのIDセレクタと11の複合セレクタを定義したとします。上記の計算では、IDセレクタの重みは100で、複合セレクタの重みは110です。
コードは以下の通り：
<body>
<p id="x" class="a b c d e f g h i j k">selector</p>
<style>
.a.b.c.d.e.f.g.h.i.j.k {
color: blue;
}
#x {
color: red;
}
</style>
</body>
テストの結果、フォントの色は赤になりました。つまり、11個のクラス・セレクタが複合セレクタを形成していても、IDセレクタよりも優先順位が低いのです。したがって、この優先度の計算方法は正確ではありません。
特殊なケース
notセレクタは否定型の擬似クラスセレクタです。 notセレクタ自身はセレクタの数のカウントに参加しませんが、:notセレクタに含まれるセレクタは数のカウントに参加します。
コードは以下の通り：
<body style="color: black">
<p id="x">selector1</p>
<p class="a">selector2</p>
<style>
.a {
color: blue;
}
:not(#x) {
color: green;
}
</style>
</body>
テストの結果、2番目のpタグのテキストは緑色になり、.aセレクタよりも:not(#x)セレクタの方が優先順位が高いことが証明されました。
注: 細かい問題があります。インラインスタイルのcolor: blackはbodyタグで定義されています。この理由は、:notセレクタが、body要素やhtml要素を含む、x以外のidを持つ要素にマッチしてしまうからです。
、子セレクタと子孫セレクタ
大雑把に言えば、実はどちらも同じように優先順位が高く、コードは以下のようになります：
<body>
<p class="a">selector</p>
<style>
body>.a {
color: red;
}
body .a {
color: blue;
}
</style>
</body>
テスト結果は、pタグ内のテキストの色は、コード内のこれら2つのセレクタの順序に関連しています。近隣セレクタと兄弟セレクタについても同様です。
おすすめ
セレクタの優先順位をテストするのに使える面白いツールサイトを推薦します。
