Web前端面试指导(十三)：css样式的优先级是怎么样的？

题目点评

CSS样式的优先级规则给人的感觉总是摸不透，更不用说怎么去表达了，在网络上流传着很多版本，描述的都很复杂也不全面，看了之后还是不满意。我来给大家介绍一个比较系统、全面有比较容易记住的规则吧！

解答思路

• 样式优先级规则

1.优先级顺序为：!important>style>权重值

2. 如果权重相同，则最后定义的样式的起作用，应该避免这种情况出现

权重规则

• 标签的权重为1
• class的权重为10
• id的权重为100

权重取值示例

1. /*权重为1*/
2. div{
3. }
4. /*权重为10*/
5. .class1{
6. }
7. /*权重为100*/
8. #id1{
9. }
10. /*权重为100+1=101*/
11. #id1 div{
12. }
13. /*权重为10+1=11*/
14. .class1 div{
15. }
16. /*权重为10+10+1=21*/
17. .class1 .class2 div{
18. }

--------------------------------------------------------------------------------------------------------------------