选择器优先级

• 抛出一个问题
• 选择器优先级
• 权重
• !important
• 外部样式与内部样式冲突

抛出一个问题

先抛出一个问题，请问下述代码的 h2 元素展示什么效果？

我在学习选择器优先级知识

带着问题，学习选择器优先级知识

选择器优先级

行内 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器

通过不同的选择器，选中相同的元素，并且为相同的样式名设置不同的值时，发生了样式的冲突。到底用哪个样式，此时需要根据优先级进行判断；

因为行内优先级最高，所以虽然不推荐CSS写行内的方式（破坏了html结构的整体性），但是 h2 元素颜色还是会因为 style:“color: blue” 而设定为蓝色；

此外，需要注意的是，该内容为覆盖的概念，即虽然行内选择器的优先级最高，但是如果其他选择器包含行内选择器不包含的内容，比如：

我在学习选择器优先级知识

上述代码中，行内选择器只规定了内容的颜色，没有规定内容中字体大小font-size: 50px;，所以虽然 行内选择器 比 通配选择器 的优先级高，但是却也是将 通配选择器 中的字体大小设置展示出来；即是 覆盖 而非 替换；

权重

格式：(a, b, c)
a：ID选择器的格式
b：类，伪类，属性选择器的个数
c：元素，伪元素选择器的个数

例如：

ul>li						(0,0,2)
div ul>li p a span			(0,0,6)
#atguigu .slogan			(1,1,0)
#atguigu .slogan a			(1,1,1)
#aiguigu .slogan a:hover	(1,2,1)

以上优先级为：

(1,2,1) > (1,1,1) > (1,1,0) > (0,0,6) > (0,0,2)

优先级权重最大，最后效果采用优先级最大的格式；

!important

一锤定音，只要有 !important 标识在最后，那么就采用其作为格式；

p {color: blue !important;
}

在这个例子中，所有的 p 元素都将被强制设置为蓝色，即使其他样式表或样式规则中使用了更高的优先级或具有更具体的选择器。

外部样式与内部样式冲突

如果外部样式与内部样式同时作用一个元素，那么效果的呈现，会根据外部样式与内部样式的优先级进行比较，优先级高者居上。