一，属性值的计算过程
大家都知道一个属性的值会经过一个计算过程，比如width:50%明显需要计算父容器的宽度才能确定，那么属性值的计算具体过程是怎么样的？
一个属性的最终值经过四步计算产生
1，定义值（specified value）：通过定义产生的
2，计算值（computed value）：由定义值计算出来用来继承的值
3，使用值（used value）：如果有必要的话会把计算值转换成一个绝对值，叫做使用值
4，实际值（actual value）：使用值加上环境的限制，就是实际值
下面分别看看这四种值是怎么产生的：
定义值：
浏览器必须按照下面规则来确定定义值：
1，如果有css定义的值，直接使用它。这里的css定义包括作者样式，用户样式和浏览器样式。比如你定义了一个font-size;12px那么就直接使用12px
2，否则，如果属性是可继承的，并且当前元素不是根元素，则使用父元素的计算值
3，否则，如果属性有初始值，则用初始值。（这里的初始值指的是什么？好像从来没见过什么元素有初始值）
计算值：
定义值经过层叠（cascade）计算就是计算值。注意，计算值绝对不需要浏览器渲染文档（也就是计算值是在浏览器渲染文档之前产生的）。
使用值：
计算值并不依赖与文档的渲染，但是有些属性比如width:50% 必须要在渲染文档之后才能确定。因此，当浏览器渲染文档时，把计算值和它对其他元素的依赖综合起来就是使用值。
比如width:50%的元素，浏览器把他的父容器渲染完之后，根据父容器的宽度和50%才能计算出使用值。
实际值：
使用值已经可以合法的用来渲染了，但是某些情况下浏览器可能依然会有其他的限制，比如只能border宽度只能是整数，比如色弱模式下必须显示高对比颜色，使用值加上这些限制计算出来的就是实际值。
实际值是最终应用在元素属性上的。
属性值的计算过程大家理论上知道就可以了，对我们使用css其实没有什么影响。
二，选择器优先级的计算过程
选择器的优先级计算细则就显得很重要了。
之前有人说选择器的优先级是tagname=1,classname=10,id=100, 因此选择器 #demo > ul > .active的优先级就是 100+10+1 = 111,实际上真是这么计算的嘛，难道10个class就和一个id的优先级是一样的？
下面看看官方对选择器的定义：
一个选择器的优先级由四个数字a,b,c,d确定。当比较两个选择器时，先比较a，a值大的优先级高，如果a相等则比较b，b值大的优先级高，以此类推。因此，无论b的值多大，也不会对a值的比较造成影响。
a由style确定，如果一个属性由元素上的style属性定义则a为1，否则a为0
b是id的数量
c是class和伪类以及属性的数量
d是tagname以及伪元素的数量
按照这个规则，我们来看看下面这个选择器的优先级：
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
<HEAD>
<STYLE type="text/css">
#x97z { color: red }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: green">
</BODY>
上例中的元素是绿色的，因为内联元素的优先级最高
同时也可以得出结论，低优先级选择器的叠加是不会影响高优先级的选择器的，那些想通过100个class来覆盖id选择器的童鞋可以洗洗睡了。
注：这里的“浏览器”其实应该翻译为“用户代理”比较精确，因为我们一般的用户代理都是浏览器，所以不用深究。
官方文档： http://www.w3.org/TR/CSS2/cascade.html
2046
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
