CSS选择器优先级（特异性）

（!important）

#id

.title, input[type="text"], :hover

div, ::before

(0, 0, 0, 0)
(行内样式，ID选择器，class/属性/伪类选择器/，类型/伪元素)

<div id="container">
    <ul class="menu">
        <li id="item1" class="item1">项目1</li>
        <li class="item2">项目1</li>
        <li class="item3">项目1</li>
    </ul>
</div>
<style>
    /* (0, 1, 3, 1) */
    #container .menu.menu li.item2 {
        color: #ff4757;
    }
    /* (0, 1, 2, 1) */
    #container li:nth-child(2).item2 {
        color: #7bed9f;
    }
    /* (0, 1, 1, 1) */
    #container li.item2 {
        color: #ffa502;
    }
    /* (0, 0, 1, 1) */
    li.item2 {
        color: #5352ed;
    }
    /* (0, 0, 1, 0) */
    .item2 {
        color: #ff6b81
    }
</style>