猜一下
| 01 | <!DOCTYPE HTML> |
| 02 | <html> |
| 03 | <head> |
| 04 | <meta charset="utf-8"> |
| 05 | <style type="text/css"> |
| 06 | body{font-family: "Microsoft YaHei";} |
| 07 | .a1 .a2 .a3 .a4 .a5 .a6 .a7 .a8 .a9 .a10 .a11{color:red;} |
| 08 | #b{color:green;} |
| 09 | </style> |
| 10 | </head> |
| 11 |
| 12 | <body> |
| 13 | <div class="a1"> |
| 14 | <div class="a2"> |
| 15 | <div class="a3"> |
| 16 | <div class="a4"> |
| 17 | <div class="a5"> |
| 18 | <div class="a6"> |
| 19 | <div class="a7"> |
| 20 | <div class="a8"> |
| 21 | <div class="a9"> |
| 22 | <div class="a10"> |
| 23 | <div class="a11" id="b"> |
| 24 | CSS Selector的优先级 |
| 25 | </div> |
| 26 | </div> |
| 27 | </div> |
| 28 | </div> |
| 29 | </div> |
| 30 | </div> |
| 31 | </div> |
| 32 | </div> |
| 33 | </div> |
| 34 | </div> |
| 35 | </div> |
| 36 | </body> |
| 37 | </html> |
答案很明显就是你看到的那样儿，究竟为什么一时又很难说的清楚。
今天突然想到精通css里讲到过关于css特殊性的计算，原来是酱紫的…
所有的selector都被分配一个数值（包含内联），将所有selector值相加得到最终优先级。但是计算中并不是满10进1来计算，而是采用一个没有指定的更高的基数。保证高级别的selector(id)不被那11个或者更多低级的selector组合超出。
selector的特殊性分四个等级：a,b,c,d可将a看成是最高位以此类推
- 如果样式为内联a=1
- b为id的总数
- c为class, pseudo-class, and attribute selectors总数
得出此表：
