Interesting: 256 class selectors can kill 1 ID selectors-Zhang Xin Xu

As we all know, from the selector scoring weights, the ID selector ( #aaa{} ) and Class selector () are .aaa{} not at all an order of magnitude, the former: 1-0-0; the latter is 0-1-0.
So:

#id {color:darkblue;}. class {color:darkred;} <span id= "id" class= "class" > Color yes? </span>

Then obviously: the color is: Darkblue

Interesting phenomenon.

I suddenly remembered a video I saw on Weibo: the video of the Japanese bees encircling and dying the bumblebee--though the little bee fighting is a slag, a lot of it will do something interesting--the heat is enough to kill a hornet.

However, in the world of CSS, there is actually a similar "win by quantity" interesting phenomenon. For example, here's what to show: 256 cascading class selectors that beat up the 1 ID selectors for fun stories.

The test code is as follows, first the CSS section:

#id {background:darkblue;}. C000.c001.c002.c003.c004.c005.c006.c007.c008.c009.c010.c011.c012.c013.c014.c015.c016.c017.c018.c019.c020.c021.c022.c023.c 024. C025.c026.c027.c028.c029.c030.c031.c032.c033.c034.c035.c036.c037.c038.c039.c040.c041.c042.c043.c044.c045.c046.c047.c048.c 049. C050.c051.c052.c053.c054.c055.c056.c057.c058.c059.c060.c061.c062.c063.c064.c065.c066.c067.c068.c069.c070.c071.c072.c073.c 074. C075.c076.c077.c078.c079.c080.c081.c082.c083.c084.c085.c086.c087.c088.c089.c090.c091.c092.c093.c094.c095.c096.c097.c098.c 099. C100.c101.c102.c103.c104.c105.c106.c107.c108.c109.c110.c111.c112.c113.c114.c115.c116.c117.c118.c119.c120.c121.c122.c123.c 124. C125.c126.c127.c128.c129.c130.c131.c132.c133.c134.c135.c136.c137.c138.c139.c140.c141.c142.c143.c144.c145.c146.c147.c148.c 149. C150.c151.c152.c153.c154.c155.c156.c157.c158.c159.c160.c161.c162.c163.c164.c165.c166.c167.c168.c169.c170.c171.c172.c173.c 174.c175.c176.c177.c178.c179.c180.c181.c182.c183.c184.c185.c186.c187.c188.c189.c190.c191.c192.c193.C194.c195.c196.c197.c198.c199.c200.c201.c202.c203.c204.c205.c206.c207.c208.c209.c210.c211.c212.c213.c214.c215.c216.c217.c 218. C219.c220.c221.c222.c223.c224.c225.c226.c227.c228.c229.c230.c231.c232.c233.c234.c235.c236.c237.c238.c239.c240.c241.c242.c 243.c244.c245.c246.c247.c248.c249.c250.c251.c252.c253.c254.c255 {background:darkred;}  Test {display:block;  height:100px; width:100px}?

Then the HTML section:

<test id= "id" class= "c000 c001 c002 c003 c004 c005 c006 c007 c008 c009 c010 c011 c012 c013 c014 c015 c016 c017 c018 c01 9 c020 c021 c022 c023 c024 c025 c026 c027 c028 c029 c030 c031 c032 c033 c034 c035 c036 c037 c038 c039 c040 c041 c042 c043 c044 c045 c046 c047 c048 c049 c050 c051 c052 c053 c054 c055 c056 c057 c058 c059 c060 c061 c062 c063 c064 c065 c066 c067 C0  c069 c070 c071 c072 c073 c074 c075 c076 c077 c078 c079 c080 c081 c082 c083 c084 c085 c086 c087 c088 c089 c090 c091 c092 c093 c094 c095 c096 c097 c098 c099 c100 c101 c102 c103 c104 c105 c106 c107 c108 c109 c110 c111 c112 c113 c114 c115 c116 C 117 c118 c119 c120 c121 c122 c123 c124 c125 c126 c127 c128 c129 c130 c131 c132 c133 c134 c135 c136 c137 c138 c139 c140 C14 1 c142 c143 c144 c145 c146 c147 c148 c149 c150 c151 c152 c153 c154 c155 c156 c157 c158 c159 c160 c161 c162 c163 c164 c165 c166 c167 c168 c169 c170 c171 c172 c173 c174 c175 c176 c177 c178 c179 c180 c181 c182 c183 c184 c185 c186 c187 c188 c189 C1 c191 c192 c193 c194 C195 c196 c197 c198 c199 c200 c201 c202 c203 c204 c205 c206 c207 c208 c209 c210 c211 c212 c213 c214 c215 c216 c217 c218 C21 9 c220 c221 c222 c223 c224 c225 c226 c227 c228 c229 c230 c231 c232 c233 c234 c235 c236 c237 c238 c239 c240 c241 c242 c243 c244 c245 c246 c247 c248 c249 c250 c251 c252 c253 c254 c255 "&GT;&LT;/TEST&GT;?

As we often know, the ID selection is one level higher than the class selection, so the background color of the above element should be #id the corresponding darkblue dark blue. However, the result above is not dark blue, but darkred dark red.

Don't believe me? You can click here: 256 class Beats 1 ID demo page

Either IE, Mozilla or WebKit browser, are the results shown:

It's Fun ~ ~

Added on 2015-03-21
According to the comments "deep blue" feedback, chrome has no such phenomenon.

Other Notes:
1. Because the test element does not exist, in order to be compatible with the Ie6~8 browser, it is necessary to write an extra line of JS code on the head:document.createElement("test");
2. Similarly, the weights of 256 nested tags will be more powerful than the 1 class.

Why is that?

It is said that looking at the source code of the Firefox browser, it is found that all class names (classes) are stored in 8-byte strings . People who know a little bit about bytes know that the maximum of 8 bytes can hold is 255. So you think, when there are 256 classes at the same time, it is bound to cross its edge and overflow to the ID area.

Gecko overflows the count of classes into the count of IDs, each of the which holds 8 bits.

-cameron McCormack (@heycam) August 16, 2012

Why is the Opera browser different?

According to the information of an opera employee, the storage of the Opera browser class name is a 16-byte string . Therefore, if the browser wants to happen class overflow to ID, it needs 65,536 classes in a row. Also do not know is because 16 byte string than 8 of their own more influence selector engine ~ ~

Yes, opera uses-bits instead of 8. Bring on 65536 classes ...

-patrick H. Lauke (@patrick_h_lauke) August 16, 2012

Other benefits

Probably a lot of csser before the selection of the weight of the relationship is not clear, the present, all kinds of CSS3 pseudo-class like Valentine's Day gift, a deluge, more confused.

To save the pages of our poor, some people abroad have made a very easy-to-understand, feeding frenzy, small fish eat shrimp, shrimp eat mud CSS selector type and weight diagram. The following is a 50% compressed picture, very understood Oh, quickly collect it ~ ~

Reference article: http://cssn.in/ja/043

Interesting: 256 class selectors can kill 1 ID selectors-Zhang Xin Xu