专业玩家请移步:http://www.w3.org/TR/CSS2/cascade.html
使用CSS控制页面样式时,经常出现设定的样式被“覆盖”,不能生效的情况。
浏览器是依据怎样的优先次序判断CSS样式的优先级的呢?
总结如下:
样式的来源
样式有多处来源,有网页开发作者设定的、有浏览器默认的、还有网页用户设定的。各种样式声明逐层叠加,或继承、或覆盖、或叠加计算,影响元素的展现效果。
样式的来源依次有:
1、浏览器默认样式;
2、用户样式;
3、作者链接样式;
4、作者页内嵌入样式(这个要尽量少用);
5、作者行内样式(这个不是好习惯,要戒掉)。
按来源次序,优先级越来越高。
选择器的特殊性
CSS提供各种选择器,可以通过标签、CSS类或ID选定元素。
选定元素的方式不同,优先级也不同。
特殊性按四个维度数计算,设为a、b、c、d,从a到d逐个比较,前面维度的优先级胜出,后面的就不用比了。
四个维度指的是:
a——行内样式;
b——通过id指定;
c——通过类或属性指定;
d——通过标签或伪类指定。
比较方法就是数个数。
举例如下(官方例子):
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
例子中,特殊性自上而下逐次增大。
如果这些选择器都指到同一个元素上,设定的同一个属性,选择特殊性大的样式生效。
如果不幸平局,后声明的生效。
优先原则
优先原则即层叠原则是“层叠样式表”的核心机制,也是CSS名称的由来。
优先原则包括三条:
1、先看特殊性;
2、再看规则来源;
3、直接设定的大于继承来的(特殊性再高,如果只是选择了父元素,或祖先元素,那直接对当前元素的设定生效)。
最后,永远不要用“!important;”。
分享到:
相关推荐
JAVA设计模式教程,程序员必备,从浅入深JAVA设计模式教程,程序员必备,从浅入深JAVA设计模式教程,程序员必备,从浅入深JAVA设计模式教程,程序员必备,从浅入深JAVA设计模式教程,程序员必备,从浅入深JAVA设计...
java程序员面试必备的32个要点java程序员面试必备的32个要点java程序员面试必备的32个要点java程序员面试必备的32个要点java程序员面试必备的32个要点java程序员面试必备的32个要点java程序员面试必备的32个要点java...
java程序员应该掌握的css知识,希望对大家有帮助。
程序员防颈椎,广播操,身体健康,写代码更有精神更。
《程序员面试宝典》程序员面试必备
nacicat 数据库操作工具,程序员必备nacicat 数据库操作工具,程序员必备nacicat 数据库操作工具,程序员必备nacicat 数据库操作工具,程序员必备nacicat 数据库操作工具,程序员必备nacicat 数据库操作工具,程序员...
程序员汇报工作必备PPT模板,非常好,大会演讲,经常用
一名合格程序员的必备工具,当然这只是一小部分的小工具,大工具无法上传
1800个程序员必备词汇,本词汇汇集了前后端软件开发中常用词汇,同时带有音标,基本满足日常开发需求,适合编程初学者及各阶段开发者学习使用。
程序员必备的英文单词,非常全面,有用,是程序员必备精品
程序员必备英文单词,方便同行之间的无代购交流 程序员必备英文单词,方便同行之间的无代购交流
transmit 类比xshell ,强烈推荐,程序员必备, transmit 类比xshell ,强烈推荐,程序员必备 transmit 类比xshell ,强烈推荐,程序员必备 transmit 类比xshell ,强烈推荐,程序员必备 transmit 类比xshell ,强烈推荐...
程序员必备资料
Java程序员获Offer必备宝典
挺管用的一个工具书,在我个人的职业生涯中,多次帮了我大忙,所以我上传到着里给网友一起分享.
程序员做到一定程度,就很快达到了自己瓶颈。该如何提升,往那方面提升,如果拓展自己,本文中的内容,帮助你找到适合自己的突围策略
程序员必备(业务和业务) 程序员必备(业务和业务) 程序员必备(业务和业务) 程序员必备(业务和业务)程序员必备(业务和业务) 程序员必备(业务和业务) 程序员必备(业务和业务) 程序员必备(业务和业务)
2016-2017年度WEB程序员必备技能.pdf2016-2017年度WEB程序员必备技能.pdf2016-2017年度WEB程序员必备技能.pdf
CSS属性大全完整版网页设计前台设计程序员必备手册
本资源为java程序员面试笔试必备基础知识,便于Java程序员进行自我比对。