CSS层叠性即优先级问题:一个简单的、循序渐进的CSS幻灯片教程
http://css9.net/simple-css-cascade-presentation/
CSS层叠性:
发生冲突时,优先级决定着浏览器解析的顺序,优先级越高,浏览器就会应用此规则!舍弃其他
three types of style sheets:
- Browser style sheet
- User style sheets
- Author style sheets
three methods that Authors can use to add CSS styles to an HTML Document :
- Inline Styles
- Header Styles
- External Style sheets (link or @import)
So,browsers have to deal with CSS rules coming from the browser,user and author style sheets.
browsers also have to deal with CSS rules coming from different types of author style sheets (external,header and inline).因此会产生冲突:
第一步:--------根据出身(browser,user,author style sheets)和importance
第二步:--------若出身origin和importance 相同,给选择器记分
specificity:特异性,特殊性
selector( a , b , c , d ),选择器分为a,b,c,d四组,全为正整数,默认为0,
a,b,c,d分别对应于行内选择器,id选择器,class选择器和html元素选择器以及各级别选择器出现的次数,根据这四个级别出现的次数计算得到CSS的优先级。
在选择器之间的优先级进行对比时,从左到右1对1对比,当比出有大者时即可停止比较。a: 有行内样式,a记为1,否则为0
b:计算id选择器出现的次数
c:计算class选择器类、伪类和属性选择符出现的次数
d:计算元素选择器出现的次数具体计算的方法看幻灯片里的代码示例:
总结:
1看出身和importance: 加了!important优先级最高,author style 》 user style 》browser style ,具体看截图一
2基本选择器 优先级:行内>id 选择器 > class 选择器 > html元素选择器
复杂点(复合选择器)计算和比较Specificity值,(a,b,c,d)从左到右1对1对比,只要有大的就胜出
3如果优先级相同,则选择最后出现的样式,因为后出现的会覆盖先出现的样式
4.继承得到的样式的优先级最低。根据以上规则,加上幻灯片和一些实例,就很容易理解CSS优先级的问题了。
再给两个参考链接:http://www.blueidea.com/tech/web/2009/6801.asp
http://www.52css.com/article.asp?id=1007