CSS优先级详解

一.按CSS语句位置:

1. 内联 > 内部 > 外部
2. CSS的继承性: 最近的祖先样式比其他祖先样式优先级高,而自身的样式比祖先样式的高。示例:

<div style="color: red;border: 1px solid #ccc;">
	红色
	<p style="color:green">绿色<span style="color:blue">蓝色</span></p>
</div>

最终结果如图1:

二.按选择器的优先级由高到低排序:
内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配选择器
各项示例:

• 内联样式：写在标签属性style的样式，如 <p style=“color=red”
• ID选择器，如#id
• 类选择器，如 .class
• 属性选择器，如 input[type=“email”]
• 伪类选择器，如a:hover
• 伪元素选择器，如 p::before
• 标签选择器，如 input
• 通配选择器，如 *

三. 多个选择器优先级计算

1. 计算选择符中 ID 选择器的个数（a） 计算选择符中类选择器

2. 属性选择器以及伪类选择器的个数之和（b）

3. 计算选择符中标签选择器和伪元素选择器的个数之和（c）

   按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断，即语句距离其对应的元素代码位置越近，优先级越高。

四.属性后面的**!important**拥有最高样式优先级
!important可以让当前CSS属性的优先级提升至最高,即比内联的样式（style)更高，如

.li-blue{
color: blue!important;
}

对于样式语句说，可以使用!important来把优先级提升至最高,即使!important放在外部文件中，优先级依旧比style高。在实际应用中，用于限定样式不受style属性内容影响，从而避免js操作该组件元素样式，或者改写一些前端UI库组件的样式。但是，!important一定要慎用，尤其不建议用在全局样式与自定义的插件样式中。