zoukankan      html  css  js  c++  java
  • css样式优先级和权重问题

    内联样式: <div style="font-size: 12px;">姓名</div>


    外部样式: <link rel="stylesheet" href="css/bootstrap.min.css" />


    内嵌样式 : <style>
                               .name{
                                   font-size: 12px;;
                               }
                      </style>


    jquery书写样式:$('#name').css('font-size','12px');


    id选择器: <div id="name">姓名</div>


    class选择器:<div class="name">姓名</div>


    一般情况下,优先级问题:

    jquery书写样式 > 内联样式 > 外部样式;

    id选择器 > class选择器 ; id一般作为数据传输,样式的话尽量使用class;

    在html页面中,程序是自上至下执行的,执行晚的优先级高,如果外部样式先执行,内嵌样式后执行,则内嵌样式 > 外部样式

    权重问题:

    元素,伪元素:                                            +1                          p{font-size:12px;} 直接写p标签的样式

    类,伪类,属性:                                         +10                        class选择器

    ID:                                                            +100                      id选择器

    内联样式:                                                   +1000                    内联样式

    用代码(js,jquery)书写的样式:                 +较高                    $('#name').css('font-size','12px');

    !important :                                            +最高                     p{font-size: 20px !important;};  

    例如以下样式:

    p {}                        p为元素                                           总权重就是:1

    div p{}                   p与div都是元素                                 总权重是:1=1=2

    .div p{}                  .div是类,p是元素                             总权重是:10+1=11

    .div .class_p{}         .div是类 .class_p是p元素的class          总权重是:10+10=20

    先写这么多!

    !important :    这个较为特殊,只要写在样式后边  font-size: 20px !important;   那这个样式的权重最高。

  • 相关阅读:
    玩转html2canvas以及常见问题解决
    docker磁盘空间清理办法
    统计行数、文件夹个数、文件个数的相关shell命令
    golang将字符串进行md5加密
    思考如何将自动化测试加入持续集成中
    锋利的NodeJS之NodeJS多线程
    成年人的必修课:抗压和自驱力
    MacOS下PHP7.1升级到PHP7.4.15
    php性能分析利器:xhprof
    后Low Code时代:聚焦和突破
  • 原文地址:https://www.cnblogs.com/lst619247/p/8334916.html
Copyright © 2011-2022 走看看