说说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查询器,自动画表格填字段
2011-04-10 10:58:00
基础语音识别-食物语音识别baseline(CNN)
2023-04-05 22:44:11
Python项目打包成二进制的方法
2023-11-07 05:22:02
Python全栈之队列详解
2022-10-12 07:51:33
Python 序列化和反序列化库 MarshMallow 的用法实例代码
2023-02-20 23:28:04
Vue中使用eslint和editorconfig方式
2024-06-05 10:03:46
Oracle数据库SQL语句性能调整的基本原则
2009-03-25 16:55:00
重置MySQL中表中自增列的初始值的实现方法
2024-01-17 19:56:47
mysql去重查询的三种方法小结
2024-01-21 14:52:22
mysql数据库密码忘记解决方法
2024-01-16 11:52:23
python切片作为占位符使用实例讲解
2023-10-13 09:26:50
Python实现简单的四则运算计算器
2022-12-29 20:44:08
PHP数组的定义、初始化和数组元素的显示实现代码
2023-06-08 14:37:28
使用豆瓣提供的国内pypi源 <font color=red>原创</font>
2023-05-31 20:39:09
JavaScript实现省市联动过程中bug的解决方法
2024-04-19 10:46:05
MySQL备份时排除指定数据库的方法
2024-01-19 03:59:21
Python中return用法案例详解
2022-09-09 10:35:40
细节设计之美:扩大可操作区域
2009-08-01 11:32:00
deepin20.1系统安装MySQL8.0.23(超详细的MySQL8安装教程)
2024-01-25 14:26:21
JavaScript实例--实现计算器
2024-04-23 09:26:17