こちらを読んで。
256個の.classを並べると#idを上書きできるらしい… | IDEA*IDEA
↑私もそう思いましたけど、こちらはちょっと違うんです。
↓こちらのように、ひとことで言うと、一意セレクタの壁は256発で壊れるけど、!important（やユーザースタイル）の壁は256発でも壊れないんです。
http://jsfiddle.net/HxDFr/
困った時の CSS Dencitie
最初あの記事を読んだ時に「あれ？10発で壊れるんじゃなかったっけ？」と思いました。
というのも、いつもお世話になってるCSSまとめサイト CSS Dencitie さんにこう書いてあったからです。
詳細度というのは、CSSのある要素に対する宣言同士がぶつかった時に解決策として用いる、計算によって導き出される値の事です。計算方法は至って簡単です。
"カスケード"について - CSS Dencitie
・セレクタ内の一意属性を数え上げ、その数を「a」とします。
・ほかの属性及び疑似クラスを数え上げ、その数を「b」とします。
・要素名を数え上げ、その数を「c」とします。
・疑似要素は無視します。
で、出て来た値を a x 100 + b x 10 + c x 1 します。
この計算だとクラス指定を10個すれば詳細度100となってidと同じになるはずです。
おかしいなあ、と思ってよく見てみるとこんな注釈が。
実際は"abc"と並べろ、という事になっていますが、どちらにせよこの方法は問題ありです。
なんと、どうやら仕様書と表現が違うらしいです。英語読むのたるいんですが、じゃあ仕様書はどうなっているのかというと、
Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.
Selectors Level 3
「3つの数字を（大きな基数の数値表現で）a-b-cの順につなげると詳細度が得られる」となってるじゃないですか。
これで解決です。ブラウザにもよるんでしょうけど「大きな基数の数値表現」に256進数を使ってるでしょうかね。桁があふれて1+0+0と0+10+0となり、256以上の数を打たれると破れてしまうわけです。もちろん65536進数とかを使ってるような変態ブラウザはidを優先するはずです。
!important の壁が破れないのはなぜか
めんどくさくなってきたので詳細は省きますが、詳細度より「重さ」の方が重要になります。「重さ」が一緒の場合に詳細度で順位付けをする仕様になっているようです。
The purpose of cascading is to find one winning declaration among the set of declarations that apply for a given element/property combination.
CSS Cascading and Inheritance Level 3
User agents must sort declarations according to the following criteria, in order of importance:
1. Weight. In CSS3, the weight of a declaration is based on the origin of the declaration and its marked level of importance. See a separate section below for how to compute the weight. The declaration with the highest weight wins.
2. Specificity. The Selectors module [SELECT] describes how to compute the specificity. The declaration with the highest specificity wins.
3. Order of appearance. The last declaration wins. Rules in imported style sheets are considered to be before any rules in the style sheet itself. Rules in two imported style sheets are considered to be in the same order as the @import rules themselves.
