浏览器通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。

步骤

查看权重

!important，它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为 1,0,0,0,0

权重相同比较特殊性

选择器特殊性值是从左向右排序的

特殊性/优先级

行间样式的特殊性是1,0,0,0
ID选择器的特殊性值，0,1,0,0
类选择器、属性选择器或伪类，0,0,1,0
元素和伪元素，0,0,0,1
通配选择器 *、+、>、~ 对特殊性没有贡献，0,0,0,0
:not(x) 没有意思，x 增加权重
继承没有

特殊性一样顺序排序

爱恨原则 LVHA（LoVe HAte）

:link、:visited、:hover、:active
伪类的特殊性值相同后面声明的规则优先级高
- 滑过 a 链接时，满足 :link 和 :hover 两个伪类
  
  改变a标签的颜色，就必须将 :hover 伪类在 :link 伪类后面声明
- 点击激活 a 链接时，同时满足 :link、:hover、:active 三种状态
  
  显示 a 标签激活时的样式（:active），必须将 :active 声明放到 :link 和 :hover 之后

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优先级</title>
</head>
<style>
    a {
        color: yellow;
    }

    /*特殊性值：0,0,0,1*/
    div a {
        color: green;
    }

    /*特殊性值：0,0,0,2*/
    .demo a {
        color: black;
    }

    /*特殊性值：0,0,1,1*/
    .demo input[type="text"] {
        color: blue;
    }

    /*特殊性值：0,0,2,1*/
    .demo *[type="text"] {
        color: grey;
    }

    /*特殊性值：0,0,2,0*/
    #demo a {
        color: orange;
    }

    /*特殊性值：0,1,0,1*/
    div#demo a {
        color: red;
    }

    /*特殊性值：0,1,0,2*/
</style>

<body>
    <a href="">第一条应该是黄色</a>
    <div class="demo">
        <input type="text" value="第二条应该是蓝色" />
        <a href="">第三条应该是黑色</a>
    </div>
    <div id="demo">
        <a href="">第四条应该是红色</a>
    </div>
</body>

</html>

原则

每个等级的初始值为 0
每个等级的叠加为选择器出现的次数相加
不可进位
依次表示为：0,0,0,0
每个等级计数之间没关联
等级判断从左向右
如果两个优先级相同，则最后出现的优先级高
通配符选择器的特殊性值为：0,0,0,0
继承样式优先级最低，通配符样式优先级高于继承样式

CSS系列 - 层叠优先级

步骤

查看权重

权重相同比较特殊性

特殊性/优先级

特殊性一样顺序排序

原则