css优先级算法如何计算

CSS优先级的算法主要基于选择器的类型和它们出现的次数。以下是一个详细的计算过程:

一、CSS优先级的组成部分

CSS优先级主要由以下四个部分组成,按照优先级从高到低排列:

内联样式(Inline Styles):直接在HTML元素上通过style属性设置的样式。

ID选择器(#id):通过元素的ID属性来选择的样式。

类选择器(.class)、属性选择器([attribute=value])和伪类选择器(:hover, :active等):这些选择器通过元素的类名、属性或伪类状态来选择的样式。

元素选择器(如div, p等)和伪元素选择器(::before, ::after等):通过HTML元素类型或伪元素来选择的样式。

二、优先级计算规则

每个CSS规则都会根据它所使用的选择器类型被赋予一个优先级值。这个值是一个四位数,每个位数代表上述四个部分中的一个。具体计算规则如下:

 

内联样式:如果规则是内联样式,那么它的优先级值中的第一个数字(即A的值)为1,其余为0,表示为(1,0,0,0)。

ID选择器:每出现一个ID选择器,就在B的值上加1。

类选择器、属性选择器和伪类选择器:每出现一个类选择器、属性选择器或伪类选择器,就在C的值上加1。

元素选择器和伪元素选择器:每出现一个元素选择器或伪元素选择器,就在D的值上加1。

三、优先级比较

计算完每个规则的优先级值后,从左到右依次比较这四个数字。如果某个数字较大,则对应的规则优先级更高。如果所有数字都相同,则最后出现的规则优先级更高(遵循“就近原则”)。

 

四、特殊情况

!important规则:如果一个样式声明后面跟着!important,那么这个声明的优先级是最高的,无论其他规则的优先级如何。但是,如果有多条!important规则冲突,则仍然需要按照上述规则来计算优先级。

继承的样式:继承得来的样式的优先级是最低的。如果多个规则都适用于同一个元素,但其中一个规则是通过继承得到的,那么它的优先级将低于其他直接声明的规则。

通配符选择器:通配符选择器(*)的特殊性值为(0,0,0,0),它对优先级的贡献为0。

五、示例

假设有以下CSS规则:

#header h1 { color: red; } /* 特殊性值:(0,1,0,1) */

body .content p { color: blue; } /* 特殊性值:(0,0,1,2) */

h1 { color: green; } /* 特殊性值:(0,0,0,1) */

 

根据上述规则,#header h1的优先级最高,因为它包含了一个ID选择器(#header)。如果#header h1和body .content p同时应用于同一个<h1>元素(假设这个<h1>位于.content内且是<header>的子元素),则#header h1的样式将覆盖body .content p的样式。如果都没有匹配到更具体的规则,则最后声明的规则(在本例中是h1 { color: green; })将作为默认值。

 

以上就是对CSS优先级算法的解释和计算过程。希望这能帮助你更好地理解CSS的层叠和优先级机制。

 

总结如下

!important > id > class > 标签

!important 比 内联优先级高

* 优先级就近原则,样式定义最近者为准;

* 以最后载入的样式为准;

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

modelscope可控细节的长文档摘要

modelscope可控细节的长文档摘要尝试 本文的想法来自今年OpenAI cookbook的一篇实践&#xff1a;summarizing_long_documents&#xff0c;目标是演示如何以可控的细节程度总结大型文档。 如果我们想让大语言模型总结一份长文档&#xff08;例如 10k 或更多tokens&#xff09;&…

【MySQL】 NDB 集群概述

MySQL NDB&#xff08;Network Database&#xff09;是MySQL的一个存储引擎&#xff0c;也称为NDB Cluster存储引擎。它主要用于构建高可用性、高可扩展性和高性能的分布式数据库集群。NDB Cluster是MySQL的一个特殊版本&#xff0c;专门设计用于处理大规模的分布式数据存储和处…

【MySQL】MySQL 9.0悄悄的来了

MySQL 9.0.0 中的变化 MySQL 9.0 中的新功能 JavaScript 存储程序 MySQL 企业版现在支持用 JavaScript 编写的存储程序&#xff0c;例如使用 CREATE FUNCTION下面显示的语句和 JavaScript 代码创建的这个简单示例&#xff1a; CREATE FUNCTION gcd(a INT, b INT) RETURNS …

SpringBoot-第一天学习

SpringBoot介绍-约定大于配置 SpringBoot是在Spring4.0基础上开发的&#xff0c;不是替代Spring的解决方案&#xff0c;而是和Spring框架结合并进一步简化Spring搭建和开发过程的。 如何简化&#xff1f;就是通过提供默认配置等方式让我们更容易&#xff0c;集成了大量常用的…

泛微开发修炼之旅--29用计划任务定时发送邮件提醒

文章链接&#xff1a;29用计划任务定时发送邮件提醒

嵌入式Linux系统编程 — 6.7 实时信号

目录 1 什么是实时信号 2 sigqueue函数 3 sigpending()函数 1 什么是实时信号 等待信号集只是一个掩码&#xff0c;它并不追踪信号的发生次数。这意味着&#xff0c;如果相同的信号在被阻塞的状态下多次产生&#xff0c;它只会在信号集中被记录一次&#xff0c;并且在信号集…

Django文档简化版——Django快速入门——创建一个基本的投票应用程序

Django快速入门——创建一个基本的投票应用程序 准备工作1、创建虚拟环境2、安装django 1、请求和响应&#xff08;1&#xff09;创建项目&#xff08;2&#xff09;用于开发的简易服务器&#xff08;3&#xff09;创建投票应用&#xff08;4&#xff09;编写第一个视图1、编写…

FreeRTOS的任务间通信

文章目录 4 FreeRTOS任务间通信4.1 队列4.1.1 队列的使用4.1.2 队列的创建&#xff0c;删除&#xff0c;复位4.1.3 队列的发送&#xff0c;接收&#xff0c;查询 4.2 邮箱&#xff08;mailbox&#xff09;4.2.1 任务中读写邮箱4.2.2 中断中读写邮箱 4.3 队列集4.3.1 队列集的创…

linux19:程序替换

一&#xff1a;最简单的看看程序替换是什么样的&#xff08;单个进程版&#xff09; 1 #include<stdio.h>2 #include<unistd.h>3 #include<stdlib.h>4 int main()5 {6 printf("Before : I am a process , myPid:%d,myPPid:%d\n",getpid(),getpp…

【Ubuntu】详细说说Parallels DeskTop安装和使用Ubuntu系统

希望文章能给到你启发和灵感~ 如果觉得文章对你有帮助的话,点赞 + 关注+ 收藏 支持一下博主吧~ 阅读指南 开篇说明一、基础环境说明1.1 硬件环境1.2 软件环境二、Ubuntu系统的使用2.1 系统的下载2.2 系统的安装2.3 安装桌面版(可选)2.3.1 安装/更新apt2.3.2 安装桌面版2.3…

算法day02 回文 罗马数字转整数

回文 搞错了String类型的indexOf方法&#xff0c;理解成获取对应下标的值&#xff0c;实际上是在找对应值的下标。 4ms 耗时最少的方法尽量不会去调用jdk提供的方法&#xff0c;而是直接使用对应的数学逻辑关系来处理&#xff0c; 甚至用 代替equals方法。 罗马数字转整数 考…

Simulink中示波器连续运行的方法

1.在Simulink中,经常要使用到示波器,默认示波器是定时运行的,只能观察到一小部分运行的波形;实际调试过程中,经常要连续运行,因此,需要设置示波器为连续运行模式,下面将介绍示波器连续运行的方法。 打开Simulink仿真软件,找到仿真设置按钮,点击设置: 2.将其停止时间…

Oracle 解决4031错误

一、问题描述 什么是4031错误和4031错误产生的原因: 简单一个句话概括: 由于服务器一直在执行大量的硬解析,导致Oracle 的shared pool Free空间碎片过多,大的chunk不足, 当又一条复杂的sql语句要硬解析时, 缺少1个足够大的Free chunk, 通常就会报4031错误. 二、解决方法 临…

JVM原理(十五):JVM虚拟机静态分配与动态分配

1. 分派 本节讲解的分派调用过程将会揭示多态性特征的一-些最基本的体现&#xff0c;如“重载”和“重写”在Java虚拟机之中是如何实现的。 1.1. 静态分派 案例&#xff1a; 我们先来看一段代码: Human mannew Man(); 我们把上面代码中的“Human"称为变量的“静态类型…

9 redis,memcached,nginx网络组件

课程目标: 1.网络模块要处理哪些事情 2.reactor是怎么处理这些事情的 3.reactor怎么封装 4.网络模块与业务逻辑的关系 5.怎么优化reactor? io函数 函数调用 都有两个作用:io检测 是否就绪 io操作 1. int clientfd = accept(listenfd, &addr, &len); 检测 全连接队列…

Contact Form 7表单获取提交用户IP及URL等信息

有时候&#xff0c;您可能需要了解Contact Form 7表单提交后的更多的信息&#xff0c;而不仅仅是通过联系人表单字段获取用户的联系信息。例如&#xff0c;需要知道用户是哪个国家&#xff08;通过获取IP&#xff09;&#xff0c;了解用户使用的设备&#xff08;手机还是电脑&a…

【IDEA】maven如何进行文件导入,配置并打包

一&#xff0c;介绍、安装 1、maven介绍 maven是一个Java世界中&#xff0c;构建工具。 核心功能&#xff1a; (1) 管理依赖&#xff1a; 管理文件运行的顺序逻辑依赖关系。对配置文件&#xff0c;进行构建和编译。其也是在调用jdk&#xff0c;来进行编译打包工作。 (2) 打…

Protobuf(三):理论学习,简单总结

1. Protocol Buffers概述 Protocol Buffers&#xff08;简称protobuf&#xff09;&#xff0c;是谷歌用于序列化结构化数据的一种语言独立、平台独立且可扩展的机制&#xff0c;类似XML&#xff0c;但比XML更小、更快、更简单protobuf的工作流程如图所示 1.1 protobuf的优点…

2024上海初中生古诗文大会暑期备考:单选题真题示例和独家解析

现在距离2024年初中生古诗文大会初选还有不到4个月&#xff08;11月3日正式开赛&#xff09;&#xff0c;我们继续来看10道选择题真题和详细解析。为帮助孩子自测和练习&#xff0c;题目的答案和解析统一附后。 本专题持续分享。 一、上海初中古诗文大会历年真题精选(参考答案…

【ROS2】初级:CLI工具- 启动节点

目标&#xff1a;使用命令行工具一次启动多个节点。 教程级别&#xff1a;初学者 时间&#xff1a;5 分钟 目录 背景 先决条件 任务 运行启动文件控制 Turtlesim 节点&#xff08;可选&#xff09; 摘要 下一步 背景 在大多数入门教程中&#xff0c;您每运行一个新节点就会打开…