欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css选择器优先级

程序员文章站 2024-01-29 17:56:04
...

优先级如下

  1. !important
  2. style属性
  3. 描述精确度
  4. id选择器数量多的
  5. class选择器数量多的
  6. tag选择器数量多的
  7. 写在后面的

js在线编译器
css选择器优先级

<style>
    div{
        color:red;
    }
    div p{
        color:blue;
    }
    /* 精确度 */
    #d1 p.cp2#p2{
        color:green;
    }
    #d1 .cp2.cp2#p2{
        color:purple;
    }
    /* id选择器数量相等,看类选择器 */
</style>
<div id='d1' class="cd1">
    <p id='p1' class='cp1'>p1</p>
    <p id='p2' class='cp2'>p2</p>
</div>

稍微修改一下:
css选择器优先级

<style>
    div{
        color:blue;
    }
    div{
        color:red;
    }
    /* 写于后 */
    
    #d1 p.cp2#p2{
        color:green;
    }
    #d1 .cp2.cp2#p2{
        color:purple;
    }
    #p2{
        color:green !important;
    }
    /* !important优先级max */

</style>
<div id='d1' class="cd1">
    <p id='p1' class='cp1'>红色</p>
    <p id='p2' class='cp2'>绿色</p>
</div>
相关标签: HTML css