CSS 的优先规则
作者:weilaixu 来源:weilaixu博客 时间:2009-01-08 12:40:00
CSS2.1 中规定了关于 CSS 规则 Specificity(特异性)的计算方式,用一个四位的数字串(注:CSS2 中是用三位)来表示,最后以 Specificity 的高低判断 CSS 的优先权。
Specificity 具体的计算规则:
1.元素的 style 样式属性,加 1000。
2.每个 ID 选择符(#id),加 0100。
3.每个 class 选择符(.class)、每个属性选择符(例 [attr=”"] )、每个伪类(例 :hover),加 0010。
4.每个元素或伪元素(例 :firstchild)等,加 0001。
5.其他选择符(例 全局选择符 *,子选择符 >),加 0000。
最后逐位相加数字串,得到最终的 Specificity 值,按照从左到右的顺序逐位比较。除了 Specificity 还有一些其他规则:
6.!important 声明的规则高于一切,如果 !important 声明冲突,则比较优先权。
7.如果优先权一样,则按源码中“后来者居上”的原则。
8.由继承而得到的样式属性不参与 specificity 的计算,低于一切其他规则(例 全局选择符 * )。
范例分析:
h1 {color: red;}
/* 只有一个普通元素加成,结果是 0001 */
body h1 {color: green;}
/* 两个普通元素加成,结果是 0002 */
/*0001 小于 0002 ,后者胜出*/
h2.grape {color: purple;}
/* 一个普通元素、一个class选择符加成,结果是 0011*/
h2 {color: silver;}
/*一个普通元素,结果是 0001 */
/*0011 大于 0001 ,前者胜出*/
html > body table tr[id=”totals”] td ul > li {color: maroon;}
/* 7个普通元素、一个属性选择符、两个其他选择符(子选择符 >),结果是0017 */
li#answer {color: navy;}
/* 一个ID选择符,一个普通选择符,结果是0101 */
/*0017 小于 0101,后者胜出*/
几日前处理一个非常驳杂的项目,改皮子而已。分3个部分。第一部分花了2小时硬改的,第二部分花了1小时写css。第三部分花了30分钟。呃,优先级,我爱你!
标签:优先,规则,css
0
投稿
猜你喜欢
python openpyxl打开文件关闭问题
2023-02-19 17:27:42
Python中让MySQL查询结果返回字典类型的方法
2024-01-25 04:37:33
Node.js模块全局安装路径配置方法
2024-05-13 09:28:11
django foreignkey外键使用的例子 相当于left join
2021-04-17 15:52:33
nodeJS express路由学习req.body与req.query方法实例详解
2024-06-05 09:52:34
用err.raise自定义错误信息
2008-02-20 12:48:00
keras实现theano和tensorflow训练的模型相互转换
2023-04-18 05:49:26
跨浏览器实现float:center,No CSS hacks
2008-08-22 12:59:00
理解Proxy及使用Proxy实现vue数据双向绑定操作
2024-04-26 17:41:43
Python 实现绘制子图及子图刻度的变换等问题
2021-09-30 22:34:38
layui radio单选限制下一个radio单选的实例
2024-06-09 15:52:07
对Python发送带header的http请求方法详解
2022-02-06 11:44:59
Vue Router根据后台数据加载不同的组件实现
2023-07-02 16:59:14
浅析SQL Server的分页方式 ISNULL与COALESCE性能比较
2024-01-15 20:51:48
详解Python字典的运算
2021-02-15 16:28:19
python实现扫雷游戏的示例
2023-04-14 12:07:21
Python使用draw类绘制图形示例讲解
2022-04-06 01:16:31
go第三方库sqlx操作MySQL及ORM原理
2024-01-18 21:12:32
在ASP中使用SQL语句之1:SELECT 语句
2007-08-11 12:18:00
Mysql中的事务是什么如何使用
2024-01-21 18:42:26