CSS——属性值计算
CSS——属性值计算
今天来详细讲解一下 CSS的属性值计算过程,这是 CSS 的核心之一(另一个是视觉可视化模型,个人理解,这个相对复杂,以后再讲)。
基本概念
- 层叠样式表:
Cascade Style Sheet,是的,这就是 CSS 的中英文全称。 - 层叠:在 CSS 样式中,会出现一些样式的冲突,层叠就是用来解决这些冲突的。
- 声明:键值对形式,用来指定样式,如:color: red。
- 用户代理样式表:浏览器内置的默认样式表,确保在没有任何外部或内部CSS的情况下,网页内容能够以一种合理的方式呈现给用户。
- 作者样式表:网页作者定义的CSS内容(不一定是一个文件,可以是外部CSS文件,可以是内部<style>标签内的样式、也可以是行内样式)
- 用户样式表:网页用户自定义的样式表,一般与我们开发者无关,后面不详细考虑。
属性值计算规则(顺序)
CSS 的属性值计算主要分为以下 4 个步骤:
- 确定声明值
- 层叠冲突
- 使用继承
- 使用默认值
接下来我们逐一讲述。
确定声明值
我们首先创建以下代码:
<head><style>p {color: blueviolet;}</style>
</head><body><div class="text"><p>你好,我是懒羊羊大王</p></div>
</body>

这里我们声明了<p>标签文本的为紫罗兰色,目前来看没有冲突,显示出来的也是紫罗兰色,没有任何问题。
层叠冲突
当有样式冲突时,那么浏览器该按照哪个声明渲染呢?前面说到,层叠就是解决冲突的,层叠具体规则以及顺序如下:
- 首先比较源的重要性
- 然后查看是否为内联(行内)样式
- 接着比较
选择器的特定性(权重) - 最后比较声明在源码中出现的顺序
源的重要性
样式表按照源可以分为三类:作者样式表、用户样式表(一般不考虑)、浏览器用户代理样式表。它们的优先级依次降低。
查看是否为行内样式
这里不仅仅有使用选择器设置于行内设置的差异,还有一个很特殊但几乎不会使用的情况——! important,优先级为:设置! important的样式 > 行内样式> 选择器样式。
比较选择器的特定性(权重)
当我们将鼠标放置在标签选择器上时,会看到浏览器特定性:(x, y, z),这里我们就可以将它看作一个三位正整数,比较大小时,我们先比较 x,再比较 y,最后比较 z。
问:那么其大小是如何确定的呢?
答:常见的选择器的特定性如下:
id选择器:(1, 0, 0)、
类选择器:(0, 1, 0)、
标签选择器:(0, 0, 1)……
多个选择器的特定性可以叠加。
(伪类选择器(如:hover)和属性选择器(如[type=“input”])与一个类选择器的优先级相同。通用选择器(*)和组合器(>、+、~)对优先级没有影响。详情见 MDN Specificity)

源码顺序
在前面比较结束之后,仍然未分出优先级的话,那么就来比较在源码中出现的顺序了,同一个样式表中顺序靠后的声明,或者是位于html页面较晚引入的样式表中,那么这个声明胜出。
总而言之,层叠的规则如下图所示(记得考虑 ! important)

使用继承
那么如果没有声明的属性呢?此时就使用默认值么?
No、No、No,此时还有第三个步骤,那就是使用继承而来的值。如果属性可以继承的话,那么就会继承其父元素的属性值。大多数能继承的属性是一些文字相关的属性,具体的请参考MDN官方。
使用默认值
进行了以上步骤之后,如果属性值都还不能确定下来,那么就会使用默认值。
结语
创作不易,谢谢支持;如有错误,恳请指出,希望与大家共同进步!
相关文章:
CSS——属性值计算
CSS——属性值计算 今天来详细讲解一下 CSS的属性值计算过程,这是 CSS 的核心之一(另一个是视觉可视化模型,个人理解,这个相对复杂,以后再讲)。 基本概念 层叠样式表:Cascade Style Sheet&am…...
408算法题leetcode--第26天
496. 下一个更大元素 I 题目地址:496. 下一个更大元素 I - 力扣(LeetCode) 题解思路:单调栈,如注释 时间复杂度:O(n m) 空间复杂度:O(n) 代码: class Solution { public:vector<int&g…...
JavaScript 与浏览器存储
JavaScript提供了两种存储数据的方式:LocalStorage和SessionStorage。这两种方式都是浏览器提供的客户端存储解决方案,可以将数据保存在用户的浏览器中,供网站使用。 LocalStorage和SessionStorage的区别在于数据的作用域和生命周期。 Loca…...
Chromium 如何查找已经定义好的mojom函数实现c++
进程通信定义通常都是用.mojom文件或者idl文件格式 以content\common\frame.mojom里面的BeginNavigation函数为例。 一、如何查找BeginNavigation函数定义,在vscode里面直接搜索BeginNavigation,过滤条件 *.idl,*.mojom,*.cc 效果: 这样…...
图文深入理解Oracle DB Scheduler(续)-调度的创建
List item 今天是国庆假期最后一天。窗外,秋雨淅淅沥沥淅淅下个不停。继续深宅家中,闲来无事,就多写几篇博文。 本篇承接前一篇,继续图文深入介绍Oracle DB Scheduler。本篇主要介绍调度的创建。 1. 创建基于时间的作业 • 可以…...
基于Springboot的宠物咖啡馆平台的设计与实现(源码+定制+参考)
博主介绍: ✌我是阿龙,一名专注于Java技术领域的程序员,全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师,我在计算机毕业设计开发方面积累了丰富的经验。同时,我也是掘金、华为云、阿里云、InfoQ等平台…...
Conda答疑
文章目录 优雅的使用Conda管理python环境1. conda info -e 和conda env list区别2.conda创建环境 创建的新环境在哪个文件夹下3. 自定义路径4. anaconda 新建环境 包是来自哪里4.1. 默认 Anaconda 仓库4.2. Conda-Forge4.3. 镜像源4.4. 自定义频道4.5. 总结 5. conda config --…...
Python 工具库每日推荐【PyPDF2】
文章目录 引言Python PDF 处理库的重要性今日推荐:PyPDF2 工具库主要功能:使用场景:安装与配置快速上手示例代码代码解释实际应用案例案例:PDF文件合并案例分析高级特性加密和解密PDF添加水印扩展阅读与资源优缺点分析优点:缺点:总结【 已更新完 TypeScript 设计模式 专栏…...
Nacos的应用
什么是nacos? Nacos是一个开源的动态服务发现,配置管理和服务治理平台。主要用于构建原生应用和微服务架构。它是阿里巴巴开源的项目,整合了配置管理,服务管理,服务发现的功能,核心价值在于帮助用户在云平…...
CSS圆角
在制作网页的过程中,有时我们可能需要实现圆角的效果,以前的做法是通过切图(将设计稿切成便于制作成页面的图片),使用多个背景图像来实现圆角。在 CSS3 出现之后就不需要这么麻烦了,CSS3 中提供了一系列属性…...
信息安全工程师(37)防火墙概述
前言 防火墙是一种网络安全系统,旨在监控和控制网络流量,根据预定义的安全规则决定是否允许数据包的传输。 一、定义与功能 定义:防火墙是网络安全的第一道防线,由硬件设备和软件系统共同构成,位于外网与内网之间、公共…...
多元化网络团队应对复杂威胁
GenAI、ML 和 IoT 等技术为威胁者提供了新的工具,使他们更容易针对消费者和组织发起攻击。 从诱骗受害者陷入投资骗局的Savvy Seahorse ,到使用 ChatGPT 之类的程序感染计算机并阅读电子邮件的自我复制 AI 蠕虫,新的网络威胁几乎每天都在出现…...
Observer(观察者模式)
1. 意图 定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新。 在观察者模式中,有两类对象:被观察者(Subject)和观察者(Observer…...
Python深度学习进阶与前沿应用:注意力机制、Transformer模型、生成式模型、目标检测算法、图神经网络、强化学习等
近年来,伴随着以卷积神经网络(CNN)为代表的深度学习的快速发展,人工智能迈入了第三次发展浪潮,AI技术在各个领域中的应用越来越广泛。为了帮助广大学员更加深入地学习人工智能领域最近3-5年的新理论与新技术࿰…...
24.1 prometheus-exporter管理
本节重点介绍 : exporter 流派 必须和探测对象部署在一起的1对多的远端探针模式 exporter管控的难点 1对1 的exporter 需要依托诸如 ansible等节点管理工具 ,所以应该尽量的少 1对1的exporter改造成探针型的通用思路 exporter 流派 必须和探测对象部署在一起的…...
【Arduino IDE安装】Arduino IDE的简介和安装详情
目录 🌞1. Arduino IDE概述 🌞2. Arduino IDE安装详情 🌍2.1 获取安装包 🌍2.2 安装详情 🌍2.3 配置中文 🌍2.4 其他配置 🌞1. Arduino IDE概述 Arduino IDE(Integrated Deve…...
『网络游戏』自适应制作登录UI【01】
首先创建项目 修改场景名字为SceneLogin 创建一个Plane面板 - 将摄像机照射Plane 新建游戏启动场景GameRoot 新建空节点重命名为GameRoot 在子级下创建Canvas 拖拽EventSystem至子级 在Canvas子级下创建空节点重命名为LoginWnd - 即登录窗口 创建公告按钮 创建字体文本 创建输入…...
用Manim简单解释奇异值分解(SVD)和图像处理方面的应
一,介绍 奇异值分解(SVD)是一种重要的矩阵分解技术,在统计学、信号处理和机器学习等领域有广泛应用。对于任意给定的矩阵 A(可以是任意形状的矩阵),SVD将其分解为三个特定的矩阵的乘积&#x…...
红外变电站分割数据集,标注为json格式,总共有5类,避雷器(289张),绝缘子(919张),电流互感器(413张),套管(161张),电压互感器(153张)
红外变电站分割数据集,标注为json格式,总共有5类 避雷器(289张),绝缘子(919张),电流互感器(413张),套管(161张)࿰…...
HBase 性能优化 详解
HBase 是基于 Hadoop HDFS 之上的分布式 NoSQL 数据库,具有高伸缩性和强大的读写能力。然而,由于其分布式架构和复杂的数据存储模式,在高并发、大规模数据场景下,HBase 性能优化至关重要。从底层原理和源代码层面理解 HBase 的特性…...
MPNet:旋转机械轻量化故障诊断模型详解python代码复现
目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...
零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?
一、核心优势:专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发,是一款收费低廉但功能全面的Windows NAS工具,主打“无学习成本部署” 。与其他NAS软件相比,其优势在于: 无需硬件改造:将任意W…...
【Java学习笔记】Arrays类
Arrays 类 1. 导入包:import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序(自然排序和定制排序)Arrays.binarySearch()通过二分搜索法进行查找(前提:数组是…...
Day131 | 灵神 | 回溯算法 | 子集型 子集
Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣(LeetCode) 思路: 笔者写过很多次这道题了,不想写题解了,大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...
系统设计 --- MongoDB亿级数据查询优化策略
系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log,共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题,不能使用ELK只能使用…...
el-switch文字内置
el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...
MVC 数据库
MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...
论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)
笔记整理:刘治强,浙江大学硕士生,研究方向为知识图谱表示学习,大语言模型 论文链接:http://arxiv.org/abs/2407.16127 发表会议:ISWC 2024 1. 动机 传统的知识图谱补全(KGC)模型通过…...
【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...
HarmonyOS运动开发:如何用mpchart绘制运动配速图表
##鸿蒙核心技术##运动开发##Sensor Service Kit(传感器服务)# 前言 在运动类应用中,运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据,如配速、距离、卡路里消耗等,用户可以更清晰…...
