CSS选择器的优先级计算

1、行内样式，style属性内的特性值 1000

<div style="width: 100px;">one</div>

2、id选择器的特性值 100

#one {
    width: 100px;
}

<div id="one">one</div>

3、类选择器、伪类选择器、属性选择器特性值 10

/* 类选择器 */
.one {
    width: 100px;
}

/* 伪类选择器 */
div:first-child {
    height: 100px;
}
/* 属性选择器 */
[class=one] {
    background-color: blue;
}

<div class="one">one</div>

4、标签选择器、伪元素选择器特性值 1

/* 标签择器 */
div {
    height: 100px;
}
/* 伪元素择器 */
div::after{
    content:'***';
    font-size:12px;
}

<div>one</div>

5、其他选择器* 空格 + > 特性值 0

6、计算方式如下：比如遇见一个类选择器，则选择器的特性值加10，最终计算出整个CSS选择器的特性值。如果CSS属性有！important修饰，则优先级最高。如果特性值一样，则根据就近原则进行计算。
如：#one .two>div li 特性值为 100+10+1+1=112