|
||||
发现很多朋友对 CSS 的优先权不甚了解,规则很简单。需要说明的一点,如果你的样式管理需要深层判断 CSS 的优先权,更应反思自己的 CSS 代码,是否合理?是否优化?
CSS2.1中规定了关于CSS规则Specificity(特异性)的计算方式,用一个四位的数字串(注:CSS2中是用三位)来表示,最后以Specificity的高低判断CSS的优先权。
Specificity具体的计算规则:
元素的style样式属性,加1,0,0,0。
每个ID选择符(#id),加0,1,0,0。
每个class选择符(.class)、每个属性选择符(例[attr=”"] )、每个伪类(例:hover),加0,0,1,0。
每个元素或伪元素(例:firstchild)等,加0,0,0,1。
其他选择符(例全局选择符*,子选择符>),加0,0,0,0。
最后逐位相加数字串,得到最终的Specificity值,按照从左到右的顺序逐位比较。
除了Specificity还有一些其他规则:
!important声明的规则高于一切,如果!important声明冲突,则比较优先权。
如果优先权一样,则按源码中“后来者居上”的原则。
由继承而得到的样式属性不参与specificity的计算,低于一切其他规则(例全局选择符* )。范例分析:
h1 {color: red;}/*只有一个普通元素加成,结果是0,0,0,1 */body h1 {color: green;}/*两个普通元素加成,结果是0,0,0,2 *//*0,0,0,1小于0,0,0,2 ,后者胜出*/ h2.grape {color: purple;}/*一个普通元素、一个class选择符加成,结果是0,0,1,1*/h2 {color: silver;}/*一个普通元素,结果是0,0,0,1 *//*0,0,1,1大于0,0,0,1 ,前者胜出*/ html > body table tr[id=”totals”] td ul > li {color: maroon;}/* 7个普通元素、一个属性选择符、两个其他选择符(子选择符>),结果是0,0,1,7 */li#answer {color: navy;}/*一个ID选择符,一个普通选择符,结果是0,1,0,1 *//*0,0,1,7小于0,1,0,1,后者胜出*/ |