CSS 之层叠规则(权级、权重、顺序)详解

news2024/12/23 15:03:32

文章目录

  • 参考
  • 描述
  • 定义
  • 层叠
      • 层叠与冲突
  • 规则
      • 权重(优先级)
          • 权重值的叠加
      • 顺序
      • 权级
          • 权级
          • 层叠规则的运用
          • 顺序
  • 尾声

参考

项目描述
MDN WEB Docs优先级
Amily_mo令人烦恼的css选择器权值问题 - Amily_mo
深入解析CSS基思·J.格兰特 / 黄小、高楠 译
MDN WEB Docs:not()

描述

项目描述
Edge110.0.1587.50 (正式版本) (64 位)
在线流程图制作工具 ProcessOnProcessOn

定义

在开始相关介绍前,请允许我在此对后续所出现的部分术语进行描述。

项目描述
声明CSS 属性及其属性值被称为一个声明(当然,还包括末尾的英式分号)。
方式选中被描述目标的方式(通过各种选择器、内联样式等),方式包含了单一方式及复杂方式。
复杂方式选中被描述目标时采用了多种单一方式的方式。
单一方式选中被描述目标的方式(仅使用 单个 选择器或 使用内联样式等方式选中目标)。

注:

此处的定义描述在阅读本文前不必第一时间清除明白,但请了解,以便在本文后续内容中出现相关定义时知道在何处查询该定义的含义。

层叠

层叠与冲突

CSS 是一系列的样式声明,当多个 CSS 片段对同一目标的同一CSS 属性进行赋值操作时,将发生冲突。CSS 层叠提出了一系列规则,它决定了如何解决冲突,是 CSS 语言的基础。对于冲突,请参考如下示例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 之层叠、权级跃迁问题</title>
    <!-- 样式 -->
    <style>
        /* 使用通配符选择器覆盖(部分)
        浏览器提供的用户代理样式表 */
        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }

        div {
            width: 150px;
            height: 150px;
        }

        #container {
            background-color: salmon; /* 浅橙色 */
        }
        
        .container {
            background-color: dodgerblue; /* 闪蓝色、道奇蓝 */
        }
    </style>
</head>

<body>
    <div class="container" id="container"></div>
</body>

</html>

执行结果

#container.container 选择器对同一目标的 background-color 属性进行描述时,样式发生了冲突。CSS 层叠 决定了位于 #container 选择器中的 background-color 的属性值将生效。

注:

冲突发生在 CSS 声明之间,而非方式(选中被描述目标的方式,通过各种选择器、内联样式等)之间。因此,当发生样式冲突时,落选声明所处的方式中的其它所有声明并不会都因此而失效。对此,请参考如下示例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 之层叠、权级跃迁问题</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }

        div {
            width: 150px;
            height: 150px;
        }

        #container {
            /* 存在冲突的声明 */
            background-color: salmon; /* 浅橙色 */
        }

        /* 样式冲突发生时,落选声明所处的方式 */
        .container {
            /* 不存在冲突的声明 */
            border-radius: 50%;
            /* 存在冲突的声明 */
            background-color: dodgerblue; /* 闪蓝色、道奇蓝 */
        }
    </style>
</head>

<body>
    <div class="container" id="container"></div>
</body>

</html>

执行结果

可见,虽然 .container 中与 background-color 有关的声明在发生样式冲突后失效了,但这并没有导致该方式下的其它声明失效,比如 border-radius (你可以为该属性指定一个属性值作为半径,该属性将依据该属性值为目标设置圆角边框样式)。

规则

CSS 的层叠规则主要有三类,即权重、顺序以及权级。

权重(优先级)

你采用何种方式为目标添加样式将影响声明在样式存在冲突的情况下该声明所具有的权重。对于方式与权重的对应关系,请参照下表:

项目权重
!important10000
内联样式1000
id 选择器100
class 选择器、伪类选择器、属性选择器10
元素选择器、伪元素选择器1
通配符选择器 (*)、关系选择符 (+、 >、 ~、空格)、否定伪类选择器 (:not()0

注:

否定伪类选择器 :not() 可以将一个或多个以逗号分隔的选择器列表(不得为另一个否定选择器或伪元素)作为其参数,位于 :not() 选择器的参数列表中的选择器所描述的目标将不会被选择。

虽然否定伪类选择器对声明的权重值毫无影响,但其参数列表中的选择器能够对样式的权重造成影响。对此,请参考如下示例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 之层叠、权级跃迁问题</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }

        div {
            width: 150px;
            height: 150px;
        }

        #container {
            background-color: salmon; /* 浅橙色 */
        }

        /* 选中 class 属性值为 container 且元素的 id 属性值不得为 test 的元素 */
        .container:not(#test) {
            background-color: dodgerblue; /* 闪蓝色、道奇蓝 */
        }
    </style>
</head>

<body>
    <div class="container" id="container"></div>
</body>

</html>

执行结果

权重值的叠加

采用不同方式对同一样式进行描述时,相关声明所获得的权重值可以发生叠加。对此,请参考如下示例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 之层叠、权级跃迁问题</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }

        div {
            width: 150px;
            height: 150px;
        }

        #container div {
            background-color: salmon; /* 浅橙色 */
        }

        #container .box {
            background-color: dodgerblue; /* 闪蓝色、道奇蓝 */
        }
    </style>
</head>

<body>
    <div id="container">
        <div class="box"></div>
    </div>
</body>

</html>

执行结果

在对权重值进行累加后,#container div 中的声明的权重值为 100 + 1 = 101。而 #container .box 中的声明的权重值为 100 + 10 = 110。由于 #container box 的权重值更高,在发生样式冲突后,将优先使用 #container box 中的声明。

顺序

发生样式冲突后,若在多个方式中的声明的权重值相同,那么后面的 CSS 声明将覆盖前面的 CSS 声明。对此,请参考如下示例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 之层叠、权级跃迁问题</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }

        div {
            width: 150px;
            height: 150px;
        }

        .container_1{
            background-color: salmon; /* 浅橙色 */
        }

        .container_2{
            background-color: dodgerblue; /* 闪蓝色、道奇蓝 */
        }
    </style>
</head>

<body>
    <div class="container_1 container_2"></div>
</body>

</html>

执行结果

权级

权级

使用不同的方式为目标赋予样式将为相关的声明赋予相应的权级。方式与权级及权重值的对应关系,请见下表:

项目权重值权级
!important100005
内联样式10004
id 选择器1003
class 选择器、伪类选择器、属性选择器102
元素选择器、伪元素选择器11
通配符选择器 (*)、关系选择符 (+、 >、 ~、空格)、否定伪类选择器 (:not()00

注:

CSS 声明的权级由复杂方式中出现的权级最高的单一方式所决定,例如:

/* 该复杂方式中的声明的权级由单一方式 id 选择器决定,
   故该复杂方式的权级为 3 */
#id .class div{} 

/* 该复杂方式中的声明的权级由单一方式 id 选择器决定,
但由于该方式中与 background-color 的相关声明使用了
!important 规则,故声明 color: 'salmon'; 的权级为 3,而
background-color: 'dodgerblue' !important; 的权级为 5。*/
#id .class div{
    color: 'salmon';
    background-color: 'dodgerblue' !important;
}
层叠规则的运用
顺序

在对声明的进行优先级判断(在样式冲突发生时,使用哪一个声明)时,层叠规则的使用是具有一定顺序的。

首先,你将使用 CSS 层叠规则中的 权级规则对声明的优先级进行判断。在判断无果后,你将使用权重规则对声明的优先级进行判断。若仍旧没有结果,那么你将使用顺序规则对声明的优先级进行判断。具体的流程,请见位于下方的流程图:

尾声

💕欢迎建议💕 如果你对这篇博客右什么意见,欢迎提出。

💞欢迎提问💞 如果各位对文章中的某些内容不太理解,欢迎提问。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/372175.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

华为OD机试用Python实现 -【字符串重新排序】(2023-Q1 新题)

华为OD机试题 华为OD机试300题大纲字符串重新排序题目描述输入描述输出描述示例一输入输出示例二输入输出Python 代码实现算法思路华为OD机试300题大纲 参加华为od机试,一定要注意不要完全背诵代码,需要理解之后模仿写出,通过率才会高。 华为 OD 清单查看地址:blog.csdn.…

JavaEE|TCP/IP协议栈之TCP协议工作机制下

文章目录一、滑动窗口二、流量控制三、拥塞控制四、延时应答五、捎带应答六、面向字节流&#xff08;了解&#xff09;七、异常情况&#xff08;了解&#xff09;关于其他传输层协议一、滑动窗口 为什么要引入滑动窗口&#xff1f; 确认应答和超时重传为TCP可靠传输机制提供支持…

FTP中的TCP传输服务(电子科技大学TCP/IP实验五)

目录 一&#xff0e;实验目的 二&#xff0e;预备知识 三&#xff0e;实验原理 四&#xff0e;实验内容 五&#xff0e;实验步骤 八、总结及心得体会 九、对本实验过程及方法、手段的改进建议 一&#xff0e;实验目的 1、掌握 TCP 协议工作原理 2、掌握 TCP 的连接建立…

阿里团队刚发布的重磅图像生成基础模型,多重条件引导+图像合成,SD级别,5B参数...

一个多小时前刚发的论文&#xff0c;Composer: Creative and Controllable Image Synthesis with Composable Conditions。 我读完了快速帮大家概要一下啊。论文地址见文章最后。阿里巴巴团队开发的这个重磅图像生成模型 Compose&#xff0c;支持多重引导条件的图像生成(合成)&…

containerd安装配置

containerd基本使用命令 containerd安装 容器运行时containerd安装配置 https://blog.csdn.net/rendongxingzhe/article/details/124595415 yum list | grep containerd containerd的本地CLI工具ctr命令 containerd的组件 containerd提供包括容器的运行、测试、发布和接口…

improve-1

类型及检测方式 1. JS内置类型 JavaScript 的数据类型有下图所示 其中&#xff0c;前 7 种类型为基础类型&#xff0c;最后 1 种&#xff08;Object&#xff09;为引用类型&#xff0c;也是你需要重点关注的&#xff0c;因为它在日常工作中是使用得最频繁&#xff0c;也是需要…

DevOps是什么?DevOps能够给我们带来什么?

目录专栏导读一、DevOps是什么&#xff1f;二、为什么会出现DevOps&#xff1f;1、容器化技术的发展&#xff0c;微服务架构的发展&#xff0c;直接促进了DevOps的迅速发展2、敏态需求的增加&#xff0c;即探索性工作的增加3、软件开发活动在企业经营活动中占比的不断增加4、企…

【华为OD机试模拟题】用 C++ 实现 - 水仙花数(2023.Q1)

最近更新的博客 【华为OD机试模拟题】用 C++ 实现 - 获得完美走位(2023.Q1) 文章目录 最近更新的博客使用说明水仙花数题目输入输出描述示例一输入输出说明示例二输入输出Code使用说明 参加华为od机试,一定要注意不要完全背诵代码,需要理解之后模仿写出,通过率才会高。…

【华为OD机试模拟题】用 C++ 实现 - 获得完美走位(2023.Q1)

最近更新的博客 【华为OD机试模拟题】用 C++ 实现 - 货币单位换算(2023.Q1) 【华为OD机试模拟题】用 C++ 实现 - 选座位(2023.Q1) 【华为OD机试模拟题】用 C++ 实现 - 停车场最大距离(2023.Q1) 【华为OD机试模拟题】用 C++ 实现 - 重组字符串(2023.Q1) 【华为OD机试模…

基于stm32计算器设计

这里写目录标题 完整de代码可q我获取1 系统功能设计2 系统硬件系统分析设计2.1 STM32单片机核心电路设计2.2 LCD1602液晶显示模块电路设计2.3 4X4矩阵键盘模块设计3 STM32单片机系统软件设计3.1 编程语言选择3.2 Keil程序开发环境3.3 FlyMcu程序烧录软件介绍3.4 CH340串口程序烧…

【华为OD机试模拟题】用 C++ 实现 - 最近的点(2023.Q1)

最近更新的博客 【华为OD机试模拟题】用 C++ 实现 - 获得完美走位(2023.Q1) 文章目录 最近更新的博客使用说明最近的点题目输入输出示例一输入输出Code使用说明 参加华为od机试,一定要注意不要完全背诵代码,需要理解之后模仿写出,通过率才会高。 华为 OD 清单查看地址…

【基础篇0】Linux下ANACONDA与TF-LITE环境配置

0 写在前面&#xff1a;一些摸索与总结 对于Linux系统&#xff0c;我发现不管是电脑x86的Ubuntu还是树莓派arm的raspberry系统&#xff0c;在系统安装完毕后&#xff0c;总是自带一个特定版本的python.   例如我的ubuntu22.04自带的python版本是3.10&#xff0c;而高版本的py…

Vue3之组件

何为组件 组件化的概念已经提出了很多年了&#xff0c;但是何为组件呢&#xff1f;组件有啥优势&#xff1f;本文将会做出解答&#xff0c;首先我们需要弄清楚何为组件。在VUE的官网中的解释是&#xff1a; 组件允许我们将 UI 划分为独立的、可重用的部分&#xff0c;并且可以对…

Android 基础知识4-3.2 EditText(输入框)详解

一、EditText&#xff08;输入框&#xff09;介绍 EditText在开发中也是经常使用的控件&#xff0c;比如&#xff0c;要实现一个登录页面&#xff0c;需要用户输入账号、密码等信息&#xff0c;然后我们或得用户输入的内容&#xff0c;把它交给服务器来判断。因此&#xff0c;这…

【模拟集成电路】分频器(DIV_TSPC)设计

分频器&#xff08;DIV_TSPC&#xff09;设计前言一、DIV工作原理二、DIV电路设计&#xff08;1&#xff09;32分频原理图&#xff08;2&#xff09;D触发器原理图&#xff08;3&#xff09;D锁存器原理图&#xff08;4&#xff09;三输入与非门原理图三、DIV仿真测试32分频器测…

k8s学习之路 | Day15 k8s 中的 yaml 语法

文章目录yaml 基础什么是 yaml&#xff1f;yaml 特性适用场景基本语法规则数据类型yaml 对象yaml 数组yaml 纯量yaml 引用k8s 中的 yaml 语法\<string>\<Object>\<map[string]string>\<[]Object>\<boolean>示例 yaml 说明我在学习过程中&#xf…

【华为OD机试模拟题】用 C++ 实现 - 最多获得的短信条数(2023.Q1)

最近更新的博客 【华为OD机试模拟题】用 C++ 实现 - 获得完美走位(2023.Q1) 文章目录 最近更新的博客使用说明最多获得的短信条数题目输入输出示例一输入输出说明示例二输入输出说明Code使用说明 参加华为od机试,一定要注意不要完全背诵代码,需要理解之后模仿写出,通过…

优化WebView实现H5秒开

WebView与原生对比差在哪里&#xff1f;这里引用百度APP图片来说明。百度的开发人员将这一整个过程划分为了四个阶段&#xff0c;并统计出了各个阶段的平均耗时。可以看到&#xff0c;在初始化组件阶段就花费了 260 ms&#xff0c;首次创建耗时均值为 500 ms&#xff0c;毫无疑…

7-vue-2

vue3.2 自定义全局指令、局部指令 // 在src目录下新建一个directive文件&#xff0c;在此文件夹下新建一个index.js文件夹&#xff0c;接着输入如下内容 const directives (app) > {//这里是给元素取得名字&#xff0c;虽然是focus&#xff0c;但是实际引用的时候必须以v…

为赋能,创共赢~ 〖TFS_CLUB社区〗-〖星荐官计划〗来袭~ 期待各位小伙伴的加入~

文章目录❤️‍&#x1f525; TFS社区介绍❤️‍&#x1f525; 星荐官计划在直播结束之后&#xff0c;有几位小伙伴跟我说&#xff0c;想法是好的&#xff0c;但是会很难搞。试想一下如果真的是很容易做的事情&#xff0c;那岂不是人人都可以做&#xff1f;正因为难做&#xff…