引言

有时通过不同的选择器匹配同一个元素，虽然知道几个优先级比如内联样式是最高级，但还是在开发中不那么得心应手，这次就来详细的学习下，不同种类选择器的匹配规则。

优先级是如何计算的？

优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。

这是MDN上的官方定义，我们也知道当多个CSS声明中优先级相等的时候，CSS中最后的那个声明将会被应用到元素上。而对于从祖先元素继承而来的规则会被直接作用于元素的CSS规则总是会接管/覆盖（take over）

选择器类型优先级(递减)

• 内联样式 style="font-weight:bold"
• id选择器 #example
• 类选择器 .example，属性选择器 [type="radio"]和伪类 :hover
• 类型选择器 h1和伪元素 ::before

通配选择符 * 关系选择符 +, >, ~, ' ', || 否定伪类:not()对优先级没有影响。但是，在 :not() 内部声明的选择器会影响优先级。

!important

这个规则很熟悉，在不确定优先级时，就愣用!important,就可以让选择器生效，但这是个坏习惯，还有从可维护性角度考虑，破坏了样式表中的固有的级联规则 使得调试找bug变得更加困难了，还是少用这个规则为好。
当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。 在MDN上还有一些使用!important的经验法则

1.一定要优化考虑使用样式规则的优先级来解决问题而不是 !important

2.只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important
3.永远不要在你的插件中使用 !important
4.永远不要在全站范围的 CSS 代码中使用 !important

避开!important的方法

• 更好地利用 CSS 级联属性
• 使用更具体的规则。在选择的元素之前，增加一个或多个其他元素，使选择器变得更加具体，并获得更高的优先级。

怎样覆盖 !important

• 只需再添加一条带!important 的CSS规则，再给这个给选择器更高的优先级，或是添加一样选择器，把它的位置放在原有声明的后面
• 或者使用相同的选择器，但是置于已有的样式之后
• 改写原来的规则，以避免使用!important