CSS优先级规则与权重计算的探讨
清早在阅读《CSS彻底研究》时，发现84页的样例中“必须要指定父级div”一语没有做详细的解释（书中样例类似于权重计算的样例），于是重新阅读了一遍第一章，综合网上搜索的资料，自认为对CSS优先级与权重计算见的关系有了粗略的认识，于是写下了自己博客中的第一篇博文，这还是两年多来第一次写文章，一路走来，自己留个脚印
优先级规则
优先级规则可以表述为：
行内样式 > ID样式 > 类别样式 > 标记样式
此外：!important声明的样式优先级最高， 继承得到的样式优先级最低，同级别一般以最后覆盖的样式为准。不同级别的样式以优先级规则为准，如果优先级相同，则进行权重计算。具体规则在后面阐述。
权重定位用 “0,0,0,0” 计算，依次对应 “行内样式, ID样式, 类别样式, 标记样式”
行内样式：元素标签中定义的样式，如style属性，权重 1,0,0,0
ID样式：ID选择符的样式，如#id，权重 0,1,0,0
类别样式：.class样式，属性样式（非style属性）或者伪类（如 :hover），权重 0,0,1,0
标记样式：元素选择符（如div）或者伪类选择符（如firstchild）样式，权重 0,0,0,1
权重计算
首先给出下面的HTML
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title></title> 4 <style type="text/css"> 5 .cTest1 div{ 6 color:red; 7 } 8 9 .cTest2{ 10 color:green; 11 } 12 </style> 13 </head> 14 <body> 15 <div class="cTest1"> 16 <div> 17 Alex 18 </div> 19 <div class="cTest2"> 20 Yang 21 </div> 22 </div> 23 </body> 24 </html>
预期结果是：
Alex
Yang
实际结果是
Alex
Yang
我们可以看到cTest2样式失效了，alex所在的div样式只由“.cTest1 div”控制，没有问题，yang所在的div由“.cTest1 div”和“.cTest2”共同作用，都属于.class级别，优先级规则不能解决这个争端，我们只能依靠权重计算了，权重大的自然就是有效的，计算如下：
.cTest1 div --权重--》0,0,1,1
.cTest2 --权重--》0,0,1,0
我们看到两者前两个优先级别上都是0，看第三位，都是1，相互抵消，都得到0分，第四位一个是1，一个是0，1>0，得到0,0,0,1因此【红色】胜出
那么如何让cTest2的样式有效呢，其实我们只需要把“.cTest2”改为“.cTest1 .cTest2”即可（也就是书中所说的必须指定父级div），即可覆盖原来的样式，权重计算如下：
.cTest1 div --权重--》0,0,1,1
.cTest1 .cTest2 --权重--》0,0,2,0
红绿颜色的权重在相互抵消之后得到:
.cTest1 div --权重--》0,0,0,1
.cTest1 .cTest2 --权重--》0,0,1,0
我们从左往右看，已经CSS优先规则，优先级别依次降低，第一位都是0，不看，第二位又是0，不看，第三位【红色】是0，【绿色】是1，绿色优先级胜出，虽然第四位红色是1绿色是0，但是，依据优先级规则，从左往右优先级依次降低，即便红色的第四位是2，优先级别也没有绿色第三位是1的优先级高，我的认识是量变不会发生质变，值再大也不能提高所处的等级所以，绿色有效，红色无效
鉴于此，如果一个第一位是1，另一个第一位0，不管后面是什么，都应该是第一位是1的胜出
以上均属个人的浅见，如有阐述错误的地方，希望得到大家的纠正
