优先级顺序(由高到低)
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 时,优先级高的选择器将会被应用。
本例中按钮圆角效果将被消除。
领取专属 10元无门槛券
私享最新 技术干货