清早在阅读《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  2  3      4     13 14 15     
     
      16         
      
       17             Alex18         
      
19         
      
       20             Yang21         
      
22     
     
23 24 

 

预期结果是：

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的胜出

 

以上均属个人的浅见，如有阐述错误的地方，希望得到大家的纠正