前端开发之CSS的结构与层叠

Author : luckyGirl

经常听到刚接触CSS的童鞋问,针对同一元素的同一声明会在有多处指定,到底应用哪个声明呢? 今天就来说说这个问题. 主要参考书目: <<CSS权威指南(第三版)>> CSS(Cascading Style Sheets) — 层叠样式表,从字面意思可知样式是通过层叠去应用到相应元素的,具体就是一个在综合考虑过声明的继承性,特殊性以及声明本身的来源来向一个元素应用属性值的过程. 特殊性 首先来看一个简单的示例: h1 {color: red;} body h1 {color: green;} 这个样式的应用是如何选择的呢?,这里引入一个特殊性的概念. 特殊性值表述为四部分,如0,0,0,0,不同选择器对应的具体特殊性值如下确定: 给定的各个ID属性值,加0,1,0,0 给定的个各类属性值/属性选择/伪类,加0,0,1,0 给定的各个元素和伪元素,加0,0,0,1 结合符和通配符对特殊性没有任何贡献,加0,0,0,0 内联样式,加1,0,0,0 重要性声明没有特殊性,但优先级总是最高 h1 {color: red !important;} 由此可见: h1[Read More]

standard