css选择器优先级

优先级如下

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

js在线编译器

<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>

稍微修改一下：

<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>