Uni-Q blog

うにきゅう ぶろぐ

調べてみた。256個の.classを並べると#idを上書きの件

「ご存知、ないのですか?CSSの優先順位」 こんなスライドをあげてしまった手前(?) 256個の.classを並べると#idを上書きの件 について調べてみた。

(facebookで知人が話題にしてくれたおかげで調べられました…ありがとうございます)

CSSのことですし、非エンジニアでも分かるように書いてみます。

 

まずW3Cの公式ドキュメント http://www.w3.org/TR/CSS2/cascade.html#specificity  Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.

訳は よっつのa-b-c-dの数字を連結したもの(大きな基数がある記数法による)が、固有性をつける。 「in a number system with a large base」→「"大きな基数"がある記数法」による? 私は、システムをベースにした数字って訳して、「ブラウザによるのか〜」なんて解釈してました><

基数ってナニ!?こちらなんかを見ると分かるかも。 そして、その「"大きな基数"がある記数法」って、どんな風に設定してるのかなーって、 WebKitの実装を見てみます。 http://trac.webkit.org/browser/trunk/Source/WebCore/css/CSSSelector.cpp?rev=81845#L63 

69      case Id:
70            s += 0x10000;
〜
73      case Class:
〜
88            s += 0x100;

IDは、「0x10000」なので、「16 x 16 x 16 x 16」で「65536」 classは、「 0x100」なので、「16 x 16」で「256」 65536÷256=256なので、classが256個あるとIDに追いついちゃう!ってことになります。

 

以上! mozillaは実装どこにあるか分からなかったので、省略><