zoukankan      html  css  js  c++  java
  • CSS选择器的权重与优先规则

    CSS选择器的权重与优先规则

    CSS中每一个定义的样式都有权重,权重越大优先级越大,就会覆盖低优先级的同样名称的样式。如果优先级一样,后定义的会覆盖之前定义的。
    优先级
    1.第一等是在标签里面定义的样式,如:

    <input style='100px'>
    

    2.第二等是ID选择器,如:

    #myid {
            100px;
    }
    

    3.第三等是类选择器,如:

    .myclass{
         100px;
    }
    

    4.第四等是标签选择器,如:

    input{
         100px;    
    }
    

    5.如果是组合型的选择器,权重就等于各个子选择器的权重的和

    #myid .myclass input h1 {
             100px
        }
    

    例如这个样式的权重就是100+10+1+1=112

    例子

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            #myid h1 {
                color: red;
            }
    
            #myid {
                color: blue;
            }
    
            .myclass {
                color: orange;
            }
    
            div {
                color: #000000;
            }
    
            #myid .myclass input h1 {
                 100px
            }
        </style>
    </head>
    <body>
    <!--红色-->
    <div id="myid" class="myclass"><h1>红色</h1></div>
    <!--蓝色-->
    <div id="myid" class="myclass">蓝色</div>
    <!--橙色-->
    <div class="myclass">橙色</div>
    <!--黑色-->
    <div>黑色</div>
    </body>
    </html>
  • 相关阅读:
    安全攻防技能——安全基础概念
    解决linux下中文文件名显示乱码问题
    yaml封装
    IIS挂载网站一键更新备份
    MySQL 聚集索引和二级索引
    redolog落盘机制
    MySQL中Redo Log相关的重要参数总结
    mysql之innodb_buffer_pool
    xshell ssh 登录慢
    记录pg
  • 原文地址:https://www.cnblogs.com/Xjng/p/4902494.html
Copyright © 2011-2022 走看看