说说CSS的优先权 考虑CSS的继承与层叠
时间:2008-12-11 13:33:00
CSS2.1 中规定了关于 CSS 规则 Specificity(特异性)的计算方式,用一个四位的数字串(注:CSS2 中是用三位)来表示,最后以 Specificity 的高低判断 CSS 的优先权。
Specificity 具体的计算规则:
1.元素的 style 样式属性,加 1,0,0,0。
2.每个 ID 选择符(#id),加 0,1,0,0。
3.每个 class 选择符(.class)、每个属性选择符(例 [attr=”"] )、每个伪类(例 :hover),加 0,0,1,0。
4.每个元素或伪元素(例 :firstchild)等,加 0,0,0,1。
5.其他选择符(例 全局选择符 *,子选择符 >),加 0,0,0,0。
最后逐位相加数字串,得到最终的 Specificity 值,按照从左到右的顺序逐位比较。除了 Specificity 还有一些其他规则:
6.!important 声明的规则高于一切,如果 !important 声明冲突,则比较优先权。
7.如果优先权一样,则按源码中“后来者居上”的原则。
8.由继承而得到的样式属性不参与 specificity 的计算,低于一切其他规则(例 全局选择符 * )。
范例分析:
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,后者胜出*/
故此将这片文章发上来和大家分享
在实际开发中,需要注意经验的总结与记忆。
只有理解与形象的东西,才能更好的吸收与应用。
标签:优先权,继承,层叠,css
0
投稿
猜你喜欢
SQL Server密码管理的六个危险判断
2008-10-23 13:57:00
asp base64加解密函数代码
2011-03-31 11:02:00
SQL文本字段的数字排序问题
2008-11-18 16:47:00
10分钟学会Google Map API (一)
2009-06-07 18:17:00
Oracle DBA常用语句
2009-08-05 20:15:00
未能找到存储过程’master.dbo.xp_fileexist’解决方法
2011-03-13 09:29:00
深入MySQL数据库的索引
2009-02-26 15:27:00
了解ASP的基本语法和变量
2008-01-16 13:03:00
基于google图表API的jquery组件 I
2010-03-01 10:20:00
MYSQL教程:MySQL Show命令
2009-12-20 17:54:00
用Assets 面板为你的站点定做颜色
2007-02-03 11:39:00
经典的退出浏览器弹窗代码
2008-07-30 12:48:00
xWin之JS版
2009-09-12 18:45:00
asp里Sub与Function有什么区别
2007-08-17 10:39:00
在ORACLE里设置访问多个SQL Server数据库
2007-08-17 10:18:00
使用 createProcessingInstruction 方法不能输出 encoding 的解决方法
2009-03-10 18:22:00
网页设计中怎么将px换成em
2008-04-16 13:50:00
为什么首页最后设计
2009-07-17 19:03:00
建立合理的索引提高SQL Server的性能
2009-01-23 14:44:00
MySQL优化之数据类型的使用
2009-03-16 17:12:00