css选择器优先级顺序```````````` ![image.png](https://p1-juejin.bytei

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器优先级顺序</title>
</head>
<style>
    div{
        width: 100px;
        height: 100px;
        margin: calc(25% - 100px) auto;
    }
    /*   优先级：  !important>内联样式>ID选择器> 伪类选择器>属性选择器>类选择器 >标签选择器(伪元素选择器)> 通配选择符(*)              */
    #bgId{
        background: red;
    }
    .bgClass{
        background: green;
    }
    [title]{
        background: pink;
    }
    div:first-child{
        background: gold;
    }
    div{
        background: black;
    }
    div:before{
        display: block;
        content: "";
        width: 50px;
        height: 50px;
        background: fuchsia;
    }
    *{
        background: antiquewhite;
    }
</style>
<body>
    <div id="bgId" class="bgClass" style="background: blue" title="jessica"></div>
</body>
</html>