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

权重排行（高到低）

1、行内样式

（!important）

2、ID选择器

#id

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

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

4、类型和伪元素选择器

div, ::before

权重向量

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

权重相同，定义靠后优先

实例

    
        项目1
        项目1
        项目1
    



    /* (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
    }

最终效果