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 定义对应项值一样，继续比较下一项即可。

例如：

<div id="my-id" class="my-class">
    <input type="button" id="my-input-id" class="my-input-class" />
</div>

/* 优先级值 [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

...
<link href=".../bootstrap.css" rel="stylesheet" type="text.css">
...
<style type="text/css">
    .btn {
        border: 2px solid light-blue;
    }
</style>
...

这时候直接在自己文件中重新定义一个 btn 选择器，设置对应的属性。需要注意的是必须保证自己定义的选择器在第三方文件之后被加载。
本例中按钮边框将会是宽度为 2px 的浅蓝色效果。

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

/* file1.css */
.container {
    width: 100%;
}
/* file2.css */
.container {
    width: 800vw;
}
/* file3.css */
.container {
    width: 800px !important;
}

添加 !important 将自己的样式优先级提到最高。
本例中容器宽度将会是 800px。

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

...
<script src="./lib.css" type="text/javascript" />
<script src="./index.css" type="text/javascript" />
...
<div class="my-class">
    <input type="button" class="btn" />
</div>

/* lib.css - 第三方css文件 */
/* 优先级值 [0, 1, 0] */
.btn {
    border-radius: 12px !important;
}
/* index.css - 自己的css文件 */
/* 优先级值 [0, 2, 0] */
.my-class .btn {
    border-radius: 0 !important;
}

对于此需求，可以通过祖先元素设置一个优先级更高的选择器。对于同一属性，当多个选择器都有 !important 时，优先级高的选择器将会被应用。
本例中按钮圆角效果将被消除。