css标签权重计算知识详解

1. 为什么存在标签权重
答: 一个html标签同时对应用多个css样式，需要使用权重算法解决冲突。
2. 权重计算公式

特别注意:

1. 权重没有进位，级别不可逾越
   如 div div div{} 权重为 0,0,0,1+0,0,0,1+0,0,0,1=0,0,0,3
2. 继承的权重为0

3.判断最终生效css方法

首先判断css选择器有没有被选中指定元素

1. 选中 比较选中的几个css的权重大小 选最大的
2. 未选 继承样式权重为0

4. 通过权重判断最终生效css练习

答: 1. 除#father 没有选中p标签，虽然father !important ，但p继承#father为0，直接排除
2. 上面3个css都选中了p标签，就看他们各自的权重
#father #son权重 0,1,0,0+0,1,0,0=0,2,0,0
#father p.c2权重 0,1,0,0+0,0,0,1+0,0,1,0=0,1,1,1
div.c1 p.c2权重 0,0,0,1+0,0,1,0+0,0,0,1+0,0,1,0=0.0.2.2
比较:
#father #son权重最高
最终p字体颜色为blue.

答案: yellow
解析: 虽然 div #box3,#box1 div都选中了元素div 权重也相等为 0,1,0,1但是#box1 div{}更后面 所以使用后者。

答案: blue;

答案: blue;

答案: blue;
解析: p 继承#father 的权重为0 低于p的0,0,0,1;