CSS 样式优先级

CSS样式优先级的问题其实就是当我们“有意或无意”对一个元素设置了多个样式时，页面最终会显示哪个效果的问题。优先级在css 中就是给指定的CSS 声明分配一个权重

要了解这些权重的情况，首先要了解CSS 选择器，因为优先级是基于选择器来计算的。

基础的选择器有：元素选择器（<p>,<div>）—— 【p{ } 】

                                类选择器（class = “类名”）——【  . 类名{ }】

                                id 选择器（id=“id名”）—— 【#id名 {}】

选择器的优先级是这样的：

元素选择器（p,h1）  <  类选择器(. ) < id 选择器(#)

即id选择器将被优先显示。

值得注意的是： 给元素添加的内联样式 (如, style="font-weight:bold") 会始终覆盖外部样式表的任何样式 ，所以，内联样式具有最高的优先级。

即， 内联样式（标签内）>嵌入样式（当前文件中）>外部样式（外部文件中）

同时，关于样式层叠的优先级，在同样的权重优先级下，后面的样式始终会覆盖前面的样式。

通配选择符（universal selector）(*), 关系选择符（combinators） (+, >, ~, ' ')  和 否定伪类（negation pseudo-class）(:not()) 对优先级没有影响。

参考内容：

关于优先级：优先级是如何计算的？

关于选择器：元素选择器