什么是选择器优先级？先来看看MDN对优先级的定义：

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

光看文字比较难理解，这边举个例子

那么这段文字最终显示什么颜色呢？答案是：绿色。至于为什么显示绿色呢？这就涉及到选择器优先级的计算规则了。

一个选择器的特殊性是根据下列（规则）计算的：

特殊性只根据选择器的形式来定。特殊的，一个"[id=p33]"形式的选择器被算作一个属性选择器(a=0, b=0, c=1, d=0)，即使id属性在源文档的DTD中被定义为"ID"

4个数连起来a-b-c-d（在一个基数很大的数字系统中（in a number system with a large base））表示特殊性

一些示例：

OK， 现在已经弄清楚了优先级是怎么算的了。但是，还有一个问题，怎么比较两个优先级的高低呢？ 比较规则是: 从左往右依次进行比较 ，较大者胜出，如果相等，则继续往右移动一位进行比较 。如果4位全部相等，则后面的会覆盖前面的

上面的示例中，P元素的颜色将是绿色，"style"属性中的声明将重写STYLE元素中的，而style的优先级是{1,0,0,0}，#x97z的优先级是{0,1,0,0},从左往右比较style的第一位是1，而#x97z的第一位 是0，所以{1,0,0,0}>{0,1,0,0}，即style>#x97z，所以显示绿色。

上面的规则得出内联样式的优先级是最高的，但是还有比它更高的，那就是 !important，但是建议少用!important。