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

题目点评

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

解答思路

  • 样式优先级规则

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

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

权重规则

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

权重取值示例     

[css] view plain copy 在CODE上查看代码片派生到我的代码片
  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. }   

 

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

 

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/zxwy/p/6122319.html