CSS 优先级

优先级顺序（由高到低）

1. !important

2. 内联样式

3. ID选择器

4. 类选择器，属性选择器，伪类

5. 标签选择器，伪元素

6. 通配选择符，关系选择符，否定伪类

举例如下：

id 选择器：#my-id

类选择器： .my-class

属性选择器： [type="button"]

伪类选择器： :hover, :link

标签选择器： div, p

伪元素： ::before

通配选择符：*

关系选择符：+, >, ~, ' '

否定伪类：:not()

注：

(1) 通配选择符，关系选择符 和 否定伪类对优先级没有影响，故优先级最低

(2) 在 :not() 内部声明的选择器是会影响优先级的

优先级解析

1. 当一个标签中包含的多个 CSS 优先级相同时，最后声明的那一个 CSS 将被应用

2. 当一个标签中包含的多个 CSS 优先级不同时，优先级高的 CSS 被应用

优先级计算方法

以 ID选择器、类选择器 和 标签选择器 为例，按其优先级给定计算数组[0, 0, 0]，数组第一项代表 ID选择器，第二项代表 类选择器，第三项代表 标签选择器。CSS 定义中每包含一种选择器，对应数组项值 +1。两个 CSS 定义比较时，从数组第一项开始比，若两个 CSS 定义对应项值不一样，数值大的定义优先级高，结束比较；若两个 CSS 定义对应项值一样，继续比较下一项即可。

例如：

/* 优先级值 [1, 0, 0] */

#my-input-id{

background-color:red;

}

/* 优先级值 [0, 2, 0] */

.my-class.my-input-class{

background-color:green;

}

/* 优先级值 [1, 0, 1] */

#my-id[type="button"]{

background-color:blue;

}

如以上示例所示，最终 input 元素背景色即为 蓝色。

优先级用例

1. 要重写引用第三方的 CSS

...

...

.btn{

border:2pxsolidlightblue;

}

...

这时候直接在自己文件中重新定义一个 btn 选择器，设置对应的属性。需要注意的是必须保证自己定义的选择器在第三方文件之后被加载。

本例中按钮边框将会是宽度为 2px 的浅蓝色效果。

2. 多个 CSS 文件对同一样式进行了多次定义，要确定自己设置的属性优先级最高

/* file1.css */

.container{

width:100%;

}

/* file2.css */

.container{

width:800vw;

}

/* file3.css */

.container{

width:800px!important;

}

添加 !important 将自己的样式优先级提到最高。

本例中容器宽度将会是 800px。

3. 第三方文件中对应属性已有 !important，要自定义此属性

...

...

/* lib.css - 第三方css文件 */

/* 优先级值 [0, 1, 0] */

.btn{

border-radius:12px!important;

}

/* index.css - 自己的css文件 */

/* 优先级值 [0, 2, 0] */

.my-class.btn{

border-radius:!important;

}

对于此需求，可以通过祖先元素设置一个优先级更高的选择器。对于同一属性，当多个选择器都有 !important 时，优先级高的选择器将会被应用。

本例中按钮圆角效果将被消除。