前端开发之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 {color: red;}
body h1 {color: green;}
继承
基于继承机制,样式不仅应用到制定的元素,还会应用到它的后代元素.
h1 {color: red;}
<h1>Root Element <em>child node</em></h1>
  • 不可继承的属性:display、margin、outline、border、padding、background、text-decoration、content、counter-increment、counter-reset、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、vertical-align、float、clear、page-break-after、page-bread-before、page-break-inside
  • 继承属性的缩放因子: line-height
Note: 继承没有特殊性, 甚至连0的特殊性都没有
以下注意统配符的使用:
*{color: red;}
h1#pageTitle{color:black;}
<h1 id=”pageTitle”>Black word <em>Red word</em></h1>

 

层叠
层叠是通过结合继承和特殊性做到的,规则如下:
1. 找出与一个给定元素匹配的选择器的所有相关规则
2. 按显示权重对应到该元素的所有声明排序,如
3. 有!important的规则权重高于没有!important 规则
4. 按照来源:创作人员>>读者>>用户代理
5. 按特殊性排序
6. 按照出现顺序排序 (CSS的加载顺序)
示例1:
<p style=”color:black;”>Welcome back, <em>Lily</em> !</p>
示例2:
p#bright {color: gray;}
p {color: black;}
<p id=”bright”>Welcome back, Lily!</p>
示例3:
正确的顺序
:link {color: blue;}
:visited {color: purple;}
:hover {color: red;}
:active {color: orange;}
错误顺序, hove,active状态的样式将被忽略:
:active {color: orange;}
:hover {color: red;}
:link {color: blue;}
:visited {color: purple;}
转载请标明来源,谢谢!! http://www.yuuuuc.me/前端开发之css的结构与层叠/
standard
  1. Masahiro - 2012 年 11 月 19 日 3:09 下午

    Thniikng like that shows an expert’s touch

    回复

Have your say