当前位置： 首页 > article >正文

CSS -属性值的计算过程

article 2026/3/10 3:47:58

目录

  • 一、抛出两个问题
    • 1.如果我们学过==优先级==关系，那么请思考如下样式为何会生效
    • 2.如果我们学习过继承，那么可以知道color是可以被子元素继承使用的，那么请思考下述情景为何不生效
  • 二、属性值计算过程
    • 1.确定声明值
    • 2.层叠冲突
    • 3.使用继承
    • 4.使用默认值

一、抛出两个问题

1.如果我们学过优先级关系，那么请思考如下样式为何会生效

css优先级： !important > 行内样式（比重1000）> ID 选择器（比重100） > 类选择器（比重10） > 标签（比重1） > 通配符 > 继承 > 浏览器默认属性

思考为什么通配符选择器*的权重会大于body的margin和padding属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>属性值的计算过程</title><style>*{margin: 0;padding: 0;}.container{width: 200px;height: 200px;outline: 1px solid red;}</style>
</head>
<body><div class="container"></div>
</body>
</html>

在这里插入图片描述

2.如果我们学习过继承，那么可以知道color是可以被子元素继承使用的，那么请思考下述情景为何不生效

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>属性值的计算过程</title><style>*{margin: 0;padding: 0;}.container{color: red;}</style>
</head>
<body><div class="container"><a href="#">我有个小梦想</a></div>
</body>
</html>

在这里插入图片描述

二、属性值计算过程

  • 明确知识：页面的元素都具备一套css样式，并非仅有开发人员设定的css属性
  • 过程：无属性值-1.确定声明值-2.层叠冲突-3.使用继承-4.使用默认值-每个属性都有值

1.确定声明值

参考样式表中没有冲突的声明，作为css属性值

.container{color:red;font-size:16px;
}
h1{font-size:20px
}
.container h1{font-size:12px;font-size:16px;
}
/* 浏览器默认样式*/
h1{font-size:2em;/*举例*/
}

上述通过步骤一，可以提取出未存在冲突的 color：red；

理解好上述流程后，打开控制台我们可以看到a标签存在浏览器的默认样式，属于未存在冲突样式,color使用浏览器默认值在此环节生效,如有疑问，继续向下看，核心看继承样式生效时机

在这里插入图片描述

2.层叠冲突

对样式表有冲突的声明使用层叠规则，确定CSS属性值

  • 层叠冲突处理过程
    • 比较重要性 - 作者样式表>浏览器默认样式表 解决上述问题1
    • 比较特殊性 - css优先级
    • 比较源次序 - 后写的css覆盖先写的

通过比较重要性：浏览器默认的font-size:2em被覆盖
通过比较特殊性：确认 container h1样式被最终生效
通过比较源次序：container h1中的font-size:16px;为最终生效值

上述通过步骤二，可以提取出的 font-size:16px;

3.使用继承

对仍然没有值得属性，若可以继承，则继承父元素的值

需要明确可继承属性！！！

4.使用默认值

对仍然没有值的属性，使用默认值！

相关文章：

CSS -属性值的计算过程

目录 一、抛出两个问题1.如果我们学过优先级关系&#xff0c;那么请思考如下样式为何会生效2.如果我们学习过继承&#xff0c;那么可以知道color是可以被子元素继承使用的&#xff0c;那么请思考下述情景为何不生效 二、属性值计算过程1.确定声明值2.层叠冲突3.使用继承4.使用默…...

编程日记 2026/3/7 10:41:12

百度贴吧IP和ID是什么意思？怎么查看

在百度贴吧这一充满活力的网络社区中&#xff0c;IP和ID是两个频繁出现的概念。它们各自承载着不同的意义和作用&#xff0c;对于贴吧用户而言&#xff0c;了解这两个概念有助于更好地参与社区互动、保护个人隐私以及维护社区秩序。本文将详细解析百度贴吧中IP和ID的含义&#…...

编程日记 2026/3/7 6:18:16

SpiderX：专为前端JS加密绕过设计的自动化工具

SpiderX 一、工具概述 SpiderX是一款专为解决前端JS加密问题而设计的自动化绕过工具。在网络安全领域&#xff0c;随着前端加密技术的普及&#xff0c;传统的爬虫和自动化测试工具在面对复杂的JS加密时显得力不从心。SpiderX应运而生&#xff0c;旨在通过自动化手段高效绕过前…...

编程日记 2026/3/6 0:54:52

基于银河麒麟系统ARM架构安装达梦数据库并配置主从模式

达梦数据库简要概述 达梦数据库&#xff08;DM Database&#xff09;是一款由武汉达梦公司开发的关系型数据库管理系统&#xff0c;支持多种高可用性和数据同步方案。在主从模式&#xff08;也称为 Master-Slave 或 Primary-Secondary 模式&#xff09;中&#xff0c;主要通过…...

编程日记 2026/3/5 8:57:57

【AWS入门】AWS云计算简介

【AWS入门】AWS云计算简介 A Brief Introduction to AWS Cloud Computing By JacksonML 什么是云计算&#xff1f;云计算能干什么&#xff1f;我们如何利用云计算&#xff1f;云计算如何实现&#xff1f; 带着一系列问题&#xff0c;我将做一个普通布道者&#xff0c;引领广…...

编程日记 2026/2/28 18:09:32

适合企业内训的AI工具实操培训教程（37页PPT）（文末有下载方式）

详细资料请看本解读文章的最后内容。 资料解读&#xff1a;适合企业内训的 AI 工具实操培训教程 在当今数字化时代&#xff0c;人工智能&#xff08;AI&#xff09;技术迅速发展&#xff0c;深度融入到各个领域&#xff0c;AIGC&#xff08;人工智能生成内容&#xff09;更是成…...

编程日记 2026/2/15 12:45:04

【数据结构与算法】Java描述：第四节：二叉树

一、树的相关概念 编程中的树是模仿大自然中的树设计的&#xff0c;呈现倒立的结构&#xff0c;我们着重掌握 二叉树 。 1.1 基本概念&#xff1a; 结点的度&#xff1a;一个结点有几个子结点&#xff0c;度就是几&#xff1b; 如上图&#xff1a;A的度为3 树的度&#xff1…...

编程日记 2026/3/8 3:31:43

【一起来学kubernetes】14、StatefulSet使用详解

一、核心特性二、架构与组件三、生命周期管理四、典型应用场景**五、注意事项与最佳实践六、对比Deployment一、应用场景二、Pod管理三、部署与更新策略四、其他特性 七、常见问题八、拓展 前文中我们介绍了k8s中常用的一种控制器 Deployment&#xff0c;与之向对应的&#xff…...

编程日记 2026/3/2 8:51:15

Day5 结构体、文字显示与GDT/IDT初始化

文章目录 1. harib02b用例&#xff08;使用结构体&#xff09;2. harib02c用例3. harib02d用例&#xff08;显示字符图案&#xff09;3. harib02e用例&#xff08;增加字符图案&#xff09;4. harib02g用例4.1 显示字符串4.2 显示变量值 5. harib02h用例&#xff08;显示鼠标&a…...

编程日记 2026/2/20 1:53:43

AI第一天 自我理解笔记--微调大模型

目录 1. 确定目标&#xff1a;明确任务和数据 2. 选择预训练模型 3. 数据预处理 (1) 数据清洗与格式化 (2) 划分数据集 (3) 数据加载与批处理 4. 构建微调模型架构 (1) 加载预训练模型 (2) 修改模型尾部&#xff08;适配任务&#xff09; (3) 冻结部分层&#xff08;可…...

编程日记 2026/2/16 4:29:13

ClientAbortException问题分析

最近遇到一个问题&#xff0c;在设备采数据数据上报后频繁发生ClientAbortException异常&#xff0c;一种处理方案是ClientAbortException 问题分析-CSDN博客 一、ClientAbortException 的触发与影响 1. 定义与场景 ClientAbortException 是后端服务器&#xff08;如 Tomc…...

编程日记 2026/2/15 6:14:51

系统思考全球化落地

感谢加密货币公司Bybit的再次邀请&#xff0c;为全球团队分享系统思考课程&#xff01;虽然大家来自不同国家&#xff0c;线上学习的形式依然让大家充满热情与互动&#xff0c;思维的碰撞不断激发新的灵感。 尽管时间存在挑战&#xff0c;但我看到大家的讨论异常积极&#xff…...

编程日记 2026/2/25 21:47:56

【开原宝藏】30天学会CSS - DAY1 第一课

下面提供一个由浅入深、按步骤拆解的示例教程&#xff0c;让你能从零开始&#xff0c;逐步理解并实现带有旋转及悬停动画的社交图标效果。为了更简单明了&#xff0c;以下示例仅创建四个图标&#xff08;Facebook、Twitter、Google、LinkedIn&#xff09;&#xff0c;并在每一步…...

编程日记 2026/3/8 3:24:42

钉钉项目报销与金蝶系统高效集成技术解析

钉钉报销【项目报销类】集成到金蝶付款单【画纤骨】的技术实现 在企业日常运营中&#xff0c;数据的高效流转和准确对接是提升业务效率的关键。本文将分享一个具体的系统对接集成案例&#xff1a;如何将钉钉平台上的项目报销数据无缝集成到金蝶云星空的付款单系统中。本次方案…...

编程日记 2026/3/8 17:51:28

Python——代码格式

代码格式 良好的代码格式可以提升代码的可读性。和其他语言不同&#xff0c;Python 代码的格式是 Python 语法的组成之一&#xff0c;不符合 Python 代码无法正常运行。 注释 注释是代码中穿插的辅佐性质的文字&#xff0c;用于标识代码的含义和功能&#xff0c;可以提高程序…...

编程日记 2026/2/13 17:30:22

Datawhale coze-ai-assistant：Task 1 了解 AI 工作流 + Coze的介绍

学习网址&#xff1a;Datawhale-学用 AI,从此开始 工作流&#xff08;Workflow&#xff09;是指完成一项任务或目标时&#xff0c;按照特定顺序进行的一系列活动或步骤。它强调在计算机应用环境下的自动化&#xff0c;通过将复杂的任务拆分成多个简单的步骤&#xff0c;每一步都…...

编程日记 2026/3/9 4:39:42

深度学习 Deep Learning 第3章 概率论与信息论

第三章 概率与信息论 概述 本章介绍了概率论和信息论的基本概念及其在人工智能和机器学习中的应用。概率论为处理不确定性提供了数学框架&#xff0c;使我们能够量化不确定性和推导新的不确定陈述。信息论则进一步帮助我们量化概率分布中的不确定性。在人工智能中&#xff0c;…...

编程日记 2026/2/24 8:31:45

GStreamer —— 2.15、Windows下Qt加载GStreamer库后运行 - “播放教程 1：Playbin 使用“（附：完整源码）

运行效果 介绍 我们已经使用了这个元素&#xff0c;它能够构建一个完整的播放管道&#xff0c;而无需做太多工作。 本教程介绍如何进一步自定义&#xff0c;以防其默认值不适合我们的特定需求。将学习&#xff1a; • 如何确定文件包含多少个流&#xff0c;以及如何切换 其中。…...

编程日记 2026/3/7 20:23:15

MYsql—1

1.mysql的安装 在windows下安装mysql&#xff0c;直接官网搜索即可&#xff1a;http://www.mysql.com/&#xff0c;自己找想要的版本进行download&#xff0c;官网长这样 安装路径需要是英文路径&#xff0c;设置默认即可&#xff0c;若安装执行内容时报错&#xff0c;则AltCt…...

编程日记 2026/2/23 7:44:48

位运算（基础算法）

按位与AND&#xff08; & &#xff09; 只有当两个位都为1时&#xff0c;结果才为1,否则为0。结果不会变大 按位或 OR&#xff08; | &#xff09; 只有当两个位中有一个为1时&#xff0c;结果才为1,否则为0。结果不会变小 按位异或 XOR &#xff08; ^ &#xff09; 只…...

编程日记 2026/3/9 18:42:47

硬件地址反序？用位操作为LED灯序“纠偏”。反转二进制数即可解决

特别有意思&#xff0c;LED的灯序与其硬件地址刚好相反&#xff0c;没办法直接通过加1实现二进制进位的亮灯操作&#xff0c;查了一些资料说用数组和switch实现&#xff0c;觉得太麻烦了&#xff0c;思索良久&#xff0c;就想到了反转二进制数解决这个问题。 reverse_bits( )是…...

编程日记 2026/3/3 0:16:35

如何让ai问答机器人通人性？

领域专用的问答机器人&#xff0c;数据是灵魂。通用模型的问题在于&#xff0c;它们虽然知识广博&#xff0c;但对特定领域的深度理解不足。解决这个问题的第一步&#xff0c;就是构建一个高质量的领域知识库。 数据要精准且全面 想让机器人真正“懂”一个领域&#xff0c;数…...

编程日记 2026/2/16 7:54:59

AI绘画笔记--基础知识

一.什么是AI绘画 AI绘画或者说AI生图&#xff0c;本质上来说还是图像生成技术&#xff0c;是一种基于深度学习的人工智能技术&#xff0c;通过提前大量学习学习图像特征&#xff0c;生成符合提示词的新图像。 整个流程可以简化理解为&#xff1a;人们首先让深度学习模型读取大量…...

编程日记 2026/2/15 8:27:51

图解AUTOSAR_CP_BSWMulticoreLibrary

AUTOSAR BSW 多核库详解 AUTOSAR基础软件多核操作库详细解析 目录 架构概述 1.1. 组件架构 1.2. API结构 1.3. 错误处理流程详细设计 2.1. 基础数据类型 2.2. 接口说明 2.3. 错误处理机制使用指南 3.1. 配置说明 3.2. 典型应用场景 3.3. 注意事项 1. 架构概述 1.1. 组件架构 …...

编程日记 2026/2/24 11:55:44

热key探测技术架构设计与实践

参考&#xff1a; 得物热点探测技术架构设计与实践 Redis数据倾斜与JD开源hotkey源码分析揭秘 京东热点检测 HotKey 学习笔记 hotkey: 京东App后台中间件&#xff0c;毫秒级探测热点数据&#xff0c;毫秒级推送至服务器集群内存&#xff0c;大幅降低热key对数据层查询压力 …...

编程日记 2026/2/23 23:53:05

【微服务】java中http调用组件深入实战详解

目录 一、前言 二、http调用概述 2.1 什么是http调用 2.1.1 http调用步骤 2.2 HTTP调用特点 2.3 HTTP调用应用场景 三、微服务场景下http调用概述 3.1 微服务开发中http调用场景 3.2 微服务组件中http的应用 四、常用的http调用组件 4.1 java中常用的http组件介绍 4…...

编程日记 2026/3/5 16:19:14

Python数据结构 ——字典

1.以下关于Python字典变量的定义中,正确的是（）。 A. d={[1,2]:1, [3,4]:3} B. d={1:as, 2:sf} C. d = {(1,2):1, (3,4):3} D. d={‘python’:1, 2:[tea, cat]} 答案：C。在Python中,字典是存储可变数量键值对的数据结构,通过字典类型实现映射,键必须是唯一的,必须是不可变数据…...

编程日记 2026/2/16 15:46:51

32、构造函数

1、用构造函数反复创建多个相同结果的对象 问题 如果想反复创建多个相同结构&#xff0c;但是内容不同的对象时&#xff0c;用{}创建会代码重复&#xff0c;及其不便于维护&#xff01; 解决 今后只要想反复创建同一类型的多个相同结构不同内容的对象时&#xff0c;都用构造函…...

编程日记 2026/2/14 17:10:03

编程环境搭建专栏目录汇总

1.WindowsvscodeclineMCP配置 2. Cline使用openrouter报错&#xff1a;Error Unexpected API Response: The language model did not provide any assista...

编程日记 2026/2/15 12:41:49

app.config.globalProperties

目录 一:基础使用 1、简介 2、使用 3、打印结果: 二:封装 1、创建一个.ts文件(utils/msg.ts) 2、在main.ts中全局注册 3、在页面中使用 4、打印结果 一:基础使用 1、简介 app.config.globalProperties 是 Vue 3 应用实例&#xff08;app&#xff09;的一个配置属性&…...

编程日记 2026/3/2 1:32:28