当前位置: 首页 > news >正文

CSS——属性值计算

CSS——属性值计算

今天来详细讲解一下 CSS的属性值计算过程,这是 CSS 的核心之一(另一个是视觉可视化模型,个人理解,这个相对复杂,以后再讲)。

基本概念

  1. 层叠样式表Cascade Style Sheet,是的,这就是 CSS 的中英文全称。
  2. 层叠:在 CSS 样式中,会出现一些样式的冲突,层叠就是用来解决这些冲突的。
  3. 声明:键值对形式,用来指定样式,如:color: red
  4. 用户代理样式表:浏览器内置的默认样式表,确保在没有任何外部或内部CSS的情况下,网页内容能够以一种合理的方式呈现给用户。
  5. 作者样式表:网页作者定义的CSS内容(不一定是一个文件,可以是外部CSS文件,可以是内部<style>标签内的样式、也可以是行内样式)
  6. 用户样式表:网页用户自定义的样式表,一般与我们开发者无关,后面不详细考虑。

属性值计算规则(顺序)

CSS 的属性值计算主要分为以下 4 个步骤:

  • 确定声明值
  • 层叠冲突
  • 使用继承
  • 使用默认值

接下来我们逐一讲述。

确定声明值

我们首先创建以下代码:

<head><style>p {color: blueviolet;}</style>
</head><body><div class="text"><p>你好,我是懒羊羊大王</p></div>
</body>

在这里插入图片描述
这里我们声明了<p>标签文本的为紫罗兰色,目前来看没有冲突,显示出来的也是紫罗兰色,没有任何问题。

层叠冲突

当有样式冲突时,那么浏览器该按照哪个声明渲染呢?前面说到,层叠就是解决冲突的,层叠具体规则以及顺序如下:

  1. 首先比较源的重要性
  2. 然后查看是否为内联(行内)样式
  3. 接着比较选择器的特定性(权重)
  4. 最后比较声明在源码中出现的顺序
源的重要性

样式表按照源可以分为三类:作者样式表、用户样式表(一般不考虑)、浏览器用户代理样式表。它们的优先级依次降低

查看是否为行内样式

这里不仅仅有使用选择器设置于行内设置的差异,还有一个很特殊但几乎不会使用的情况——! 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的属性值计算过程&#xff0c;这是 CSS 的核心之一&#xff08;另一个是视觉可视化模型&#xff0c;个人理解&#xff0c;这个相对复杂&#xff0c;以后再讲&#xff09;。 基本概念 层叠样式表&#xff1a;Cascade Style Sheet&am…...

408算法题leetcode--第26天

496. 下一个更大元素 I 题目地址&#xff1a;496. 下一个更大元素 I - 力扣&#xff08;LeetCode&#xff09; 题解思路&#xff1a;单调栈&#xff0c;如注释 时间复杂度&#xff1a;O(n m) 空间复杂度&#xff1a;O(n) 代码: class Solution { public:vector<int&g…...

JavaScript 与浏览器存储

JavaScript提供了两种存储数据的方式&#xff1a;LocalStorage和SessionStorage。这两种方式都是浏览器提供的客户端存储解决方案&#xff0c;可以将数据保存在用户的浏览器中&#xff0c;供网站使用。 LocalStorage和SessionStorage的区别在于数据的作用域和生命周期。 Loca…...

Chromium 如何查找已经定义好的mojom函数实现c++

进程通信定义通常都是用.mojom文件或者idl文件格式 以content\common\frame.mojom里面的BeginNavigation函数为例。 一、如何查找BeginNavigation函数定义&#xff0c;在vscode里面直接搜索BeginNavigation&#xff0c;过滤条件 *.idl,*.mojom,*.cc 效果&#xff1a; 这样…...

图文深入理解Oracle DB Scheduler(续)-调度的创建

List item 今天是国庆假期最后一天。窗外&#xff0c;秋雨淅淅沥沥淅淅下个不停。继续深宅家中&#xff0c;闲来无事&#xff0c;就多写几篇博文。 本篇承接前一篇&#xff0c;继续图文深入介绍Oracle DB Scheduler。本篇主要介绍调度的创建。 1. 创建基于时间的作业 • 可以…...

基于Springboot的宠物咖啡馆平台的设计与实现(源码+定制+参考)

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、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&#xff1f; Nacos是一个开源的动态服务发现&#xff0c;配置管理和服务治理平台。主要用于构建原生应用和微服务架构。它是阿里巴巴开源的项目&#xff0c;整合了配置管理&#xff0c;服务管理&#xff0c;服务发现的功能&#xff0c;核心价值在于帮助用户在云平…...

CSS圆角

在制作网页的过程中&#xff0c;有时我们可能需要实现圆角的效果&#xff0c;以前的做法是通过切图&#xff08;将设计稿切成便于制作成页面的图片&#xff09;&#xff0c;使用多个背景图像来实现圆角。在 CSS3 出现之后就不需要这么麻烦了&#xff0c;CSS3 中提供了一系列属性…...

信息安全工程师(37)防火墙概述

前言 防火墙是一种网络安全系统&#xff0c;旨在监控和控制网络流量&#xff0c;根据预定义的安全规则决定是否允许数据包的传输。 一、定义与功能 定义&#xff1a;防火墙是网络安全的第一道防线&#xff0c;由硬件设备和软件系统共同构成&#xff0c;位于外网与内网之间、公共…...

多元化网络团队应对复杂威胁

GenAI、ML 和 IoT 等技术为威胁者提供了新的工具&#xff0c;使他们更容易针对消费者和组织发起攻击。 从诱骗受害者陷入投资骗局的Savvy Seahorse &#xff0c;到使用 ChatGPT 之类的程序感染计算机并阅读电子邮件的自我复制 AI 蠕虫&#xff0c;新的网络威胁几乎每天都在出现…...

Observer(观察者模式)

1. 意图 定义对象间的一种一对多的依赖关系&#xff0c;当一个对象的状态发生改变时&#xff0c;所有依赖于它的对象都得到通知并被自动更新。 在观察者模式中&#xff0c;有两类对象&#xff1a;被观察者&#xff08;Subject&#xff09;和观察者&#xff08;Observer&#xf…...

Python深度学习进阶与前沿应用:注意力机制、Transformer模型、生成式模型、目标检测算法、图神经网络、强化学习等

近年来&#xff0c;伴随着以卷积神经网络&#xff08;CNN&#xff09;为代表的深度学习的快速发展&#xff0c;人工智能迈入了第三次发展浪潮&#xff0c;AI技术在各个领域中的应用越来越广泛。为了帮助广大学员更加深入地学习人工智能领域最近3-5年的新理论与新技术&#xff0…...

24.1 prometheus-exporter管理

本节重点介绍 : exporter 流派 必须和探测对象部署在一起的1对多的远端探针模式 exporter管控的难点 1对1 的exporter 需要依托诸如 ansible等节点管理工具 &#xff0c;所以应该尽量的少 1对1的exporter改造成探针型的通用思路 exporter 流派 必须和探测对象部署在一起的…...

【Arduino IDE安装】Arduino IDE的简介和安装详情

目录 &#x1f31e;1. Arduino IDE概述 &#x1f31e;2. Arduino IDE安装详情 &#x1f30d;2.1 获取安装包 &#x1f30d;2.2 安装详情 &#x1f30d;2.3 配置中文 &#x1f30d;2.4 其他配置 &#x1f31e;1. Arduino IDE概述 Arduino IDE&#xff08;Integrated Deve…...

『网络游戏』自适应制作登录UI【01】

首先创建项目 修改场景名字为SceneLogin 创建一个Plane面板 - 将摄像机照射Plane 新建游戏启动场景GameRoot 新建空节点重命名为GameRoot 在子级下创建Canvas 拖拽EventSystem至子级 在Canvas子级下创建空节点重命名为LoginWnd - 即登录窗口 创建公告按钮 创建字体文本 创建输入…...

用Manim简单解释奇异值分解(SVD)和图像处理方面的应

一&#xff0c;介绍 奇异值分解&#xff08;SVD&#xff09;是一种重要的矩阵分解技术&#xff0c;在统计学、信号处理和机器学习等领域有广泛应用。对于任意给定的矩阵 A&#xff08;可以是任意形状的矩阵&#xff09;&#xff0c;SVD将其分解为三个特定的矩阵的乘积&#x…...

红外变电站分割数据集,标注为json格式,总共有5类,避雷器(289张),绝缘子(919张),电流互感器(413张),套管(161张),电压互感器(153张)

红外变电站分割数据集&#xff0c;标注为json格式&#xff0c;总共有5类 避雷器&#xff08;289张&#xff09;&#xff0c;绝缘子&#xff08;919张&#xff09;&#xff0c;电流互感器&#xff08;413张&#xff09;&#xff0c;套管&#xff08;161张&#xff09;&#xff0…...

HBase 性能优化 详解

HBase 是基于 Hadoop HDFS 之上的分布式 NoSQL 数据库&#xff0c;具有高伸缩性和强大的读写能力。然而&#xff0c;由于其分布式架构和复杂的数据存储模式&#xff0c;在高并发、大规模数据场景下&#xff0c;HBase 性能优化至关重要。从底层原理和源代码层面理解 HBase 的特性…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

MySQL 索引底层结构揭秘:B-Tree 与 B+Tree 的区别与应用

文章目录 一、背景知识&#xff1a;什么是 B-Tree 和 BTree&#xff1f; B-Tree&#xff08;平衡多路查找树&#xff09; BTree&#xff08;B-Tree 的变种&#xff09; 二、结构对比&#xff1a;一张图看懂 三、为什么 MySQL InnoDB 选择 BTree&#xff1f; 1. 范围查询更快 2…...

热门Chrome扩展程序存在明文传输风险,用户隐私安全受威胁

赛门铁克威胁猎手团队最新报告披露&#xff0c;数款拥有数百万活跃用户的Chrome扩展程序正在通过未加密的HTTP连接静默泄露用户敏感数据&#xff0c;严重威胁用户隐私安全。 知名扩展程序存在明文传输风险 尽管宣称提供安全浏览、数据分析或便捷界面等功能&#xff0c;但SEMR…...

Android屏幕刷新率与FPS(Frames Per Second) 120hz

Android屏幕刷新率与FPS(Frames Per Second) 120hz 屏幕刷新率是屏幕每秒钟刷新显示内容的次数&#xff0c;单位是赫兹&#xff08;Hz&#xff09;。 60Hz 屏幕&#xff1a;每秒刷新 60 次&#xff0c;每次刷新间隔约 16.67ms 90Hz 屏幕&#xff1a;每秒刷新 90 次&#xff0c;…...

【java】【服务器】线程上下文丢失 是指什么

目录 ■前言 ■正文开始 线程上下文的核心组成部分 为什么会出现上下文丢失&#xff1f; 直观示例说明 为什么上下文如此重要&#xff1f; 解决上下文丢失的关键 总结 ■如果我想在servlet中使用线程&#xff0c;代码应该如何实现 推荐方案&#xff1a;使用 ManagedE…...

背包问题双雄:01 背包与完全背包详解(Java 实现)

一、背包问题概述 背包问题是动态规划领域的经典问题&#xff0c;其核心在于如何在有限容量的背包中选择物品&#xff0c;使得总价值最大化。根据物品选择规则的不同&#xff0c;主要分为两类&#xff1a; 01 背包&#xff1a;每件物品最多选 1 次&#xff08;选或不选&#…...