不同样式的优先级
由高到低依次是:
-
5级——
!important
.foo { color: #fff !important; }
!important
是顶级优先级,可重置 JavaScript 设置的样式,通常不推荐使用。 -
4级——style 内联样式
-
3级——ID 选择器
-
2级—— 类选择器、属性选择器和伪类
-
1级——标签选择器
-
0级——通配选择器
*
、逻辑组合伪类,如:not()
、:is()
和:where
等 -
优先级最低 —— 继承的样式
尽量保持较低的优先级,以便使用更高优先级的选择器重置样式。
样式的层叠
同一元素的同一样式值被定义多次时,写在后面的样式会覆盖写在前面的样式,即 样式的层叠
因页面中的样式有以下三种来源:
- 写在 html 标签的 style 属性中的内嵌样式
- 内嵌的样式表 scoped,即页面中
<style></style>
标签内的样式 - 外链的样式表 @import,如
<link />
标签中链接的 css 文件
样式表中的样式都是通过 CSS 选择器进行定义的,而 style 样式的优先级高于 CSS 选择器,所以这三种来源的样式中,style 样式的优先级最高。
而外链的样式表比内嵌的样式表先加载,即内嵌的样式表中的样式在外链的样式表的样式的后面,所以若外链的样式表和内嵌的样式表存在相同的样式定义,内嵌的样式会覆盖外链的样式。
<template>
<p class="msg" style="color: red">我是红色</p>
<p class="msg">我是蓝色</p>
<p>我是绿色</p>
</template>
<style lang="scss" scoped>
@import './test.css';
.msg {
color: blue;
}
</style>
/* src/views/test.css */
.msg {
color: green;
}
p {
color: green;
}
所以,可简单理解为:
行内样式 style > 内嵌样式表 scoped > 外部样式表 @import
CSS选择器的优先级算法 ---- 数值计算法
每一段CSS语句的选择器都对应一个具体的数值,最终算出的数值越大优先级越高。
-
一个1级选择器(标签选择器),优先级数值+1;
-
一个2级选择器(类选择器、属性选择器和伪类),优先级数值+10;
-
一个3级选择器(ID选择器),优先级数值+100。
选择器 | 计算值 | 计算细则 |
---|---|---|
| 0 | 1个0级通配选择器,优先级数值为0 |
| 1 | 1个1级标签选择器,优先级数值为1 |
| 2 | 2个1级标签选择器,1个0级选择符,优先级数值为1+0+1 |
| 3 | 3个1级标签选择器,2个0级选择符,优先级数值为1+0+1+0+1 |
| 10 | 1个2级类名选择器,优先级数值为10 |
| 11 | 1个1级标签选择器,1个0级否定伪类,1个2级属性选择器,优先级数值为1+0+10 |
| 11 | 1个1级标签选择器,1个2级伪类,优先级数值为1+10 |
| 12 | 1个2级类名选择器,2个1级标签选择器,1个0级空格选择符,优先级数值为1+0+1+10 |
| 21 | 2个2级类名选择器,1个1级标签选择器,优先级数值为10×2+1 |
| 100 | 1个3级ID选择器,优先级数值为100 |
| 111 | 1个3级ID选择器,1个2级类名选择器,1个1级标签选择器,优先级数值为100+10+11 |
实战范例
<div class="lightblue">
<div class="darkblue">
<p>1. 颜色是?</p>
</div>
</div>
<div class="darkblue">
<div class="lightblue">
<p>2. 颜色是?</p>
</div>
</div>
当css如下时,1和2都是深蓝色,因为两个后代选择器优先级相同,深蓝色的样式在后,会覆盖之前的样式。
.lightblue p { color: lightblue; }
.darkblue p { color: darkblue; }
或
:not(.darkblue) p { color: lightblue; }
.darkblue p { color: darkblue; }
但当css如下时,1和2都是浅蓝色,因为.lightblue.lightblue p的优先级更高。
.lightblue.lightblue p { color: lightblue; }
.darkblue p { color: darkblue; }
提升优先级的方法
- 重复选择器自身(不了解的人可能以为是写错了)
.foo.foo {}
- 添加属性选择器【推荐】
.foo[class] {}
#foo[id] {}
- 使用!important【不推荐】
.foo { color: #fff !important; }
自测题
最终页面效果是?
答案
解析
/* css 权重 101 */ /* 影响内容 100 200 300*/
#container p { color: blue; }
/* css 权重 101 */ /* 影响内容 100 200 */
div #p1, div #p2 { color: red; }
/* css 权重 111 */ /* 影响内容 100 */
#container p.yellow-text { color: yellow; font-weight: bold; }
/* css 权重 12 */ /* 影响内容 200 */
div p.green-text { color: green; font-weight: bold; }
/* css 权重 2 */ /* 影响内容 100 200 300*/
div p { color: gray; }
- 影响100的样式有
/* css 权重 101 */ /* 影响内容 100 200 300*/
#container p { color: blue; }
/* css 权重 101 */ /* 影响内容 100 200 */
div #p1, div #p2 { color: red; }
/* css 权重 111 */ /* 影响内容 100 */
#container p.yellow-text { color: yellow; font-weight: bold; }
/* css 权重 2 */ /* 影响内容 100 200 300*/
div p { color: gray; }
最高权重为
/* css 权重 111 */ /* 影响内容 100 */
#container p.yellow-text { color: yellow; font-weight: bold; }
所以 100 是黄色
- 影响200的样式有
/* css 权重 101 */ /* 影响内容 100 200 300*/
#container p { color: blue; }
/* css 权重 101 */ /* 影响内容 100 200 */
div #p1, div #p2 { color: red; }
/* css 权重 12 */ /* 影响内容 200 */
div p.green-text { color: green; font-weight: bold; }
/* css 权重 2 */ /* 影响内容 100 200 300*/
div p { color: gray; }
最高权重为
/* css 权重 101 */ /* 影响内容 100 200 300*/
#container p { color: blue; }
/* css 权重 101 */ /* 影响内容 100 200 */
div #p1, div #p2 { color: red; }
权重相同时,写在后面的样式会覆盖前面的,所以最终 200 的颜色是红色
- 影响300的样式有
/* css 权重 101 */ /* 影响内容 100 200 300*/
#container p { color: blue; }
/* css 权重 2 */ /* 影响内容 100 200 300*/
div p { color: gray; }
最高权重为
/* css 权重 101 */ /* 影响内容 100 200 300*/
#container p { color: blue; }
所以300的颜色是蓝色