質問: CSSの優先度をA, B, C, Dで表しているものもあれば点数で表しているものもあります。 どっちが正しいのでしょうか? もしくはどっちも正しくて合わせて考えるのでしょうか? A, B, C, Dで表している例: スタイルシートの優先順位(計算方法) at softelメモ > > > ``` > セレクタ A B C D 優先度 > * 0 0 0 0 0000 > p 0 0 0 1 0001 > > ``` > > 以下略 > > > 点数で表している例: 【社内勉強会】特濃!CSS講座 #2: セレクタ、カスケード、継承をがっつり理解する|TechRacho(テックラッチョ)〜エンジニアの「?」を「!」に〜|BPS株式会社 > > IDセレクタ #idなど 100点(さらに高い) > > > どっちが正しいのでしょうか? どっちも正しい場合はどのように合わせて考えるとよいのでしょうか? なんとなくどっちも正しくて説明の仕方が違うだけな気もしないでもないですが... W3C的には、A, B, C, Dの説明を使っていて点数では説明していない感じでしょうか?(ここ以外のページだと説明しているんでしょうか?) (A, B, C, Dはここを見てもなんとなくしか理解できていません)
回答: これは、CSSの詳細度 (specificity) の計算のしかたのことを指しています。おそらくどちらも同じことを指していると思われます。細かいことをいえば、同じ優先度のものが10個以上あっても繰り上がりが起こったりすることはなく、単純に優先度の高いものが多くあるほうが勝つというルールであるということです(普通は10個も同じ項目が出てくることはないので、あまり問題になることはありません)。 具体的には、下記の参考リンクを参照していただきたいのですが、ざっくり説明すると以下のとおりです。 1. まず、HTML の `style` 属性で指定されているルールが優先。 2. そうでなければ、IDセレクター (`#XXX`) の個数が多いルールが優先。 3. ここまで同着ならば、クラスセレクター (`.XXX`) 、属性セレクター (`[href="..."]`) 、疑似クラス (`:first-child`) の個数が多いほうが優先。 4. ここまで同着ならば、 要素セレクター (`p`) 、疑似要素 (`::first-letter`) の個数が多いほうが優先。 5. ここまで同着ならば引き分け。(ソースコードの出現順であとのものが使われる) 参考: * MDN web docs: カスケードと継承 * MDN web docs: 詳細度