权重排行（高到低）

1、行内样式

（!important）

2、ID选择器

#id

3、class、属性、伪类选择器

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

4、类型和伪元素选择器

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>

最终效果

CSS选择器优先级（特异性）_伪元素