首页 前端知识 CSS【详解】样式优先级(含提升优先级的方法、样式的层叠、数值计算法等)

CSS【详解】样式优先级(含提升优先级的方法、样式的层叠、数值计算法等)

2024-08-12 10:08:38 前端知识 前端哥 155 67 我要收藏

不同样式的优先级

由高到低依次是:

  • 5级—— !important

    .foo { color: #fff !important; }
    

    !important 是顶级优先级,可重置 JavaScript 设置的样式,通常不推荐使用。

  • 4级——style 内联样式

  • 3级——ID 选择器

  • 2级—— 类选择器、属性选择器和伪类

  • 1级——标签选择器

  • 0级——通配选择器 *、逻辑组合伪类,如 :not():is():where

  • 优先级最低 —— 继承的样式

尽量保持较低的优先级,以便使用更高优先级的选择器重置样式。

样式的层叠

同一元素的同一样式值被定义多次时,写在后面的样式会覆盖写在前面的样式,即 样式的层叠

因页面中的样式有以下三种来源:

  1. 写在 html 标签的 style 属性中的内嵌样式
  2. 内嵌的样式表 scoped,即页面中 <style></style> 标签内的样式
  3. 外链的样式表 @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

dialog {}

1

1个1级标签选择器,优先级数值为1

ul > li {}

2

2个1级标签选择器,1个0级选择符,优先级数值为1+0+1

li > ol + ol {}

3

3个1级标签选择器,2个0级选择符,优先级数值为1+0+1+0+1

.foo {}

10

1个2级类名选择器,优先级数值为10

a:not([rel=nofollow]) {}

11

1个1级标签选择器,1个0级否定伪类,1个2级属性选择器,优先级数值为1+0+10

a:hover {}

11

1个1级标签选择器,1个2级伪类,优先级数值为1+10

ol li.foo {}

12

1个2级类名选择器,2个1级标签选择器,1个0级空格选择符,优先级数值为1+0+1+10

li.foo.bar {}

21

2个2级类名选择器,1个1级标签选择器,优先级数值为10×2+1

#foo {}

100

1个3级ID选择器,优先级数值为100

#foo .bar p {}

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; }

提升优先级的方法

  1. 重复选择器自身(不了解的人可能以为是写错了)
.foo.foo {}
  1. 添加属性选择器【推荐】
.foo[class] {}
#foo[id] {}
  1. 使用!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的颜色是蓝色

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15311.html
标签
评论
发布的文章

jQuery3 学习手册(三)

2024-08-18 22:08:04

vue和jQuery有什么区别

2024-04-29 11:04:47

推荐项目:jQuery.Gantt

2024-08-18 22:08:37

jQuery UI 秘籍(一)

2024-08-18 22:08:15

jQuery详解

2024-04-29 11:04:38

echarts饼图点击图例问题

2024-08-18 22:08:48

echarts天气折线图

2024-08-18 22:08:46

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!