优先级顺序(由高到低)
- !important
- 内联样式
- ID选择器
- 类选择器,属性选择器,伪类
- 标签选择器,伪元素
- 通配选择符,关系选择符,否定伪类
举例如下:
id 选择器:#my-id
类选择器: .my-class
属性选择器: [type=”button”]
伪类选择器: :hover, :link
标签选择器: div, p
伪元素: ::before
通配选择符:*
关系选择符:+, >, ~, ’ ’
否定伪类::not()注:
(1) 通配选择符,关系选择符 和 否定伪类对优先级没有影响,故优先级最低
(2) 在 :not() 内部声明的选择器是会影响优先级的
优先级解析
- 当一个标签中包含的多个 CSS 优先级相同时,最后声明的那一个 CSS 将被应用
- 当一个标签中包含的多个 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 时,优先级高的选择器将会被应用。
本例中按钮圆角效果将被消除。