zoukankan      html  css  js  c++  java
  • 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. }   

     

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

     

  • 相关阅读:
    grid 布局
    mongoose
    Nestjs 上传文件
    Nestjs 设置静态文件,public
    Centos 为Nginx 搭建https
    react组件
    namecheap 添加二级域名
    electron+react
    遍历文件,读取.wxss文件,在头部添加一条注释
    react 中的绑定事件
  • 原文地址:https://www.cnblogs.com/zxwy/p/6122319.html
Copyright © 2011-2022 走看看