css选择器优先级
优先顺序:
1、!important (IE6不支持此属性)
2、html中元素标签添加的style=“”(css难以管理,不推荐)
3、一个或多个id选择器
例:#top{margin:0;}
4、一个或多个类选择器(包括属性、伪类选择器)
例:.outer{} [data-job="frontend"]{} a:active{}
5、标签选择器
例:div{margin:3px;}
6、通配选择器
例:*{margin:10px;}
★ 选择器规则:
选择器权值相加,大的优先
若权值相同,后定义的优先
同一级别的个数多的优先级高,数量相同比较下一级别的个数
权值:
style=“”——1000
id选择器 ——100
类选择器/属性选择器/伪类选择器 ——10
标签/伪对象 ——1
通配选择器 ——0
例:找出下面优先级相同的选择器
A. img.thumb:after B.[data-job="frontend"]::first-letter
C. #main::before D. [type="checkbox"]:checked E. ul#shop-list
答案:
A. img.thumb:after,总纬度是0,0,1,2(即:1+10+1=12;)
B.[data-job="frontend"]::first-letter,总纬度是0,0,1,1(即:10+1=11;)
C. #main::before,总纬度是0,1,0,1(即:100+1=101;)
D. [type="checkbox"]:checked,总纬度是0,0,2,0(即:10+10=20;)
E. ul#shop-list,总纬度是0,1,0,1(即:1+100=101;)
由于该题目假定样式来源一致,因此样式优先级相同的就是C和E了。