css selector的优先级
Selector | Specificity | |
行内样式 | style="" | 1,0,0,0 |
id选择器 | #content {} | 0,1,0,0 |
class选择器 | .content{} | 0,0,1,0 |
标签选择器 | div{} | 0,0,0,1 |
2个id选择器 | #div #content{} | 0,2,0,0 |
11个class选择器 | .a1 .a2 .a3.....a11{} | 0,0,11,0 |
1个id和1个class选择器 | #div .nav{} | 0,1,1,0 |
如表格所示,行内样式拥有最高优先级,其次是id选择器,再其次是class类选择器,最后是标签选择器。
当选择器叠加的时候,并不是简单的相加。如果将id选择器的优先级看成100的话,class类选择器是10,那么11个选择器就是110,会优先于id选择器,其实错了。一个id选择器是0,1,0,0,而11个class类选择器只是0,0,11,0,id选择器还是优先于11个class类选择器。