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

【CSS】层叠，优先级与继承（三）：超详细继承知识点

article 2026/1/2 11:24:27

继承
- 一、什么是继承？
- - 2.1 祖先元素
  - 2.2 默认继承/默认不继承
- 二、可继承属性
- - 2.1 字体相关属性
  - 2.2 文本相关属性
  - 2.3 列表相关属性
- 三、不可继承属性
- - 3.1 盒模型相关属性
  - 3.2 背景相关属性
- 四、属性初始值
- - 4.1 根元素
  - 4.2 属性的初始值
  - 4.3 得出结论
- 五、强制继承
- - 5.1 initial关键字
  - 5.2 inherit关键字
  - 5.3 unset关键字
- 六、继承的优先级
- 七、继承的性能
- - 7.1 减少渲染计算
  - 7.2 精简代码

继承

一、什么是继承？

在 CSS 里，继承是一种机制，借助它元素能够从其祖先元素那里获取属性值这一特性可以让代码更简洁，减少重复的样式声明

2.1 祖先元素

<div class="outer"><div class="inner"></div>
</div>

outer是innner的祖先元素

2.2 默认继承/默认不继承

在CSS中，每个 CSS 属性定义的概述都指出了这个属性是默认继承还是默认不继承的（"Inherited":Yes/No"）

对于可继承属性，没有指定值时的子元素会取父元素的同属性计算值
对于不可继承属性，子元素不会自动获取父元素设置的这些同属性计算值

/* 对于上面的HTML代码 */
.outer{color:red;width:100px;
}
.inner{/* 当子元素没有显示声明color与width的值，它们默认取什么呢？ */
}

二、可继承属性

某些 CSS 属性具备继承性，也就是说子元素会自动继承父元素设置的这些属性值。常见的可继承属性如下：

2.1 字体相关属性

font-family ( 字体族 )
font-size ( 字体大小 )
font-weight ( 字体粗细 )
font-style ( 字体族 )

2.2 文本相关属性

color ( 文本颜色 )
text-align ( 文本对齐方式 )
line-height ( 行高 )

2.3 列表相关属性

line-style-type ( 列表项标记类型 )
line-style-position ( 列表项标记位置 )

三、不可继承属性

还有部分 CSS 属性是不可继承的，子元素不会自动获取父元素设置的这些属性值。常见的不可继承属性有：

3.1 盒模型相关属性

width ( 宽度 )
height ( 高度 )
margin ( 外边距 )
padding ( 内边距 )
border ( 边框 )

3.2 背景相关属性

background-color ( 背景颜色 )
background-image ( 背景图像 )

四、属性初始值

上面我们提到了默认继承和默认不继承属性的特点与具体类型
那么现在出现一个问题：
父元素的属性来自哪里？对于不可继承属性，这些属性默认取值又是什么？

4.1 根元素

首先我们需要知道一个概念“根元素”，它是整个文档树的起始点，也是所有其他元素的父元素或者祖先元素
在 HTML 文档中，<html> 元素是根元素
对于大部分属性，只有文档的根元素会使用属性的初始值，而其他元素会依据继承规则或者层叠规则来确定属性值

4.2 属性的初始值

属性的初始值是由 CSS 规范定义的，这些初始值的定义是为了保证在不同浏览器和设备上有一个统一的基础样式表现。
比如color 属性的初始值是 black，font-size 的初始值是 medium 等

4.3 得出结论

对于具有继承性的属性
- 若子元素没有为这些属性显式声明值，它们会从父元素那里继承属性值。
- 因为根元素是所有其他元素的祖先，所以在中间元素没有重新赋值的情况下，子元素最终会继承根元素上设置的属性值
对于默认不继承的属性
- 当元素没有被显式地设置该属性值时，元素使用的就是该属性的初始值。

五、强制继承

在某些情景，可能我们想要指定的元素属性强制继承自父元素或重置为初始值
这时就可能使用到三个关键字：initial关键字,inherit关键字，unset关键字

5.1 initial关键字

initial 关键字的作用是把属性值设置为该属性在 CSS规范里定义的初始值

对于可继承属性，使用 initial 会让元素放弃继承父元素的属性值，转而使用属性的初始值
对于不可继承属性，initial 同样会将属性值设定为初始值。

5.2 inherit关键字

inherit 关键字的主要作用是让元素强制继承其父元素的某个属性值，不管该属性在默认情况下是否具备继承性

对于可继承属性，inherit 关键字会强化这种继承行为。即便可能存在其他因素干扰继承，也能确保元素继承父元素的属性值。
对于不可继承属性，inherit 关键字可以打破常规，让元素继承父元素的该属性值

5.3 unset关键字

unset 关键字的行为取决于属性是否具有继承性

对于可继承属性，它会使用继承值
对于不可继承属性，它的效果等同于 initial，也就是使用属性的初始值

六、继承的优先级

继承的属性值优先级是最低的。若你给元素直接设置了某个属性值，这个值会覆盖继承来的值。

七、继承的性能

7.1 减少渲染计算

对于具有继承性的属性，只需要计算一次父元素的属性值，从而节省了渲染时间和计算资源，提高了页面的渲染性能

7.2 精简代码

通过继承，我们可以在父元素上统一设置一些共有的样式属性，这样不仅使 CSS 代码更简洁易读，也减少了代码量，从而加快了浏览器下载和解析 CSS 文件的速度，间接提高了页面的加载性能

【CSS】层叠，优先级与继承（三）：超详细继承知识点

目录继承一、什么是继承？2.1 祖先元素2.2 默认继承/默认不继承二、可继承属性2.1 字体相关属性2.2 文本相关属性2.3 列表相关属性三、不可继承属性3.1 盒模型相关属性3.2 背景相关属性四、属性初始值4.1 根元素4.2 属性的初始值4.3 得出结论五、强制继承5.1 in…...

编程日记 2025/12/14 12:24:20

计算机视觉算法实现——救生衣穿戴状态智能识别

✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连✨ 一、救生衣穿戴状态识别领域概述水上安全一直是全球关注的重大问题，据世界卫生组…...

编程日记 2025/12/24 7:00:38

URI、URL与URN详解概念介绍

URI (Uniform Resource Identifier) URI是统一资源标识符，是用于标识互联网上资源的字符串。它是一个用于区分资源的通用标识符，可以标识任何资源，包括文档、图像、服务等。 URI的特点提供了一种标准方法来标识资源是最广泛的资源标识概念，URL和URN都是URI的子集格式通常…...

编程日记 2025/5/28 9:06:57

Science Robotics 新型层级化架构实现250个机器人智能组队，“单点故障”系统仍可稳定运行

近期，比利时布鲁塞尔自由大学博士生朱炜煦与所在团队提出了一种创新的机器人群体架构——“自组织神经系统”（SoNS，Self-organizing Nervous System）。它通过模仿自然界中的生物神经系统的组织原理，为机器人群体建立了…...

编程日记 2025/12/30 22:06:30

手写深拷贝函数

在 JavaScript 中，深拷贝是指创建一个对象或数组的完全独立副本，包括其嵌套的对象或数组。这意味着修改副本不会影响原始对象。以下是手写一个通用的深拷贝函数的实现： 深拷贝函数实现 function deepClone(target, map new WeakMap()) {//…...

编程日记 2025/12/23 20:36:05

React 性能优化三剑客实战：告别无效重渲染！

在 Vue 中我们可能依赖 Vuex computed 进行状态共享和性能优化，而在 React 里呢？不需要用 Redux，靠 useContext、memo、useMemo 三剑客就能构建高性能组件通信方案！ 🧩 useContext 再回顾：状态共享不等于性…...

编程日记 2025/12/23 23:04:21

深度学习3.3 线性回归的简洁实现

步骤操作作用前向计算net(X)计算预测值 y_hat Xw b损失计算loss(y_hat, y)量化预测误差，驱动参数更新反向传播l.backward()计算参数梯度参数更新trainer.step()根据梯度调整参数，逼近最优解梯度清零trainer.zero_grad()防止梯度累积（必须放…...

编程日记 2025/12/10 21:48:09

复盘20250422

深度分析及个股推荐 1. 行业前景与个股逻辑梳理从提供的股票信息来看，主要涉及以下行业：合成尼古丁（电子烟）、化工、跨境支付、跨境电商、农药、食品饮料、光刻机、电子商务、造纸等。需结合行业景气度、政策支持、公司核心竞争…...

编程日记 2025/12/10 21:49:02

从零开始学习MySQL的系统学习大纲

文章目录前言第一阶段：数据库与 MySQL 基础认知数据库基础概念MySQL 简介第二阶段：MySQL 安装与环境搭建安装前的准备MySQL 安装过程安装后的配置第三阶段：SQL 基础语法SQL 概述数据库操作数据表操作数据操作第四阶段：SQL 高级…...

编程日记 2025/12/11 18:51:05

APP动态交互原型实例｜墨刀变量控制+条件判断教程

引言不同行业的产品经理在绘制原型图时，拥有不同的呈现方式。对于第三方软件技术服务公司的产品经理来说，高保真动态交互原型不仅可以在开发前验证交互逻辑，还能为甲方客户带来更直观、真实的体验。本文第三部分将分享一个实战案例&#…...

编程日记 2025/12/30 16:26:13

基于控制台的小车导航游戏开发详解（C++实现）

本文将详细讲解一个基于C控制台的小车导航游戏项目。通过该项目可以学习二维数组操作、队列数据结构应用以及游戏循环控制等核心编程概念，特别适合刚接触游戏开发的初学者学习。一、项目概述 1.1 游戏规则玩家可创建多辆具有不同初始位置和移动速度的小车每辆…...

编程日记 2025/12/30 19:14:17

色谱图QCPColorMap

一、QCPColorMap 概述 QCPColorMap 是 QCustomPlot 中用于绘制二维颜色图的类，可以将矩阵数据可视化为颜色图（热力图），支持自定义色标和插值方式。二、主要属性属性类型描述dataQCPColorMapData存储颜色图数据的对象interpol…...

编程日记 2025/12/31 18:34:46

大文件分片上传进阶版（新增md5校验、上传进度展示、并行控制，智能分片、加密上传、断点续传、自动重试），实现四位一体的网络感知型大文件传输系统‌

上篇文章我们总结了大文件分片上传的主要核心，但是我对md5校验和上传进度展示这块也比较感兴趣，所以在deepseek的帮助下，扩展了一下我们的代码，如果有任何问题和想法，非常欢迎大家在评论区与我交流，我需要学…...

编程日记 2025/12/30 23:50:19

-- 查看数据库版本 SELECT * FROM v$version WHERE banner LIKE Oracle%; 1. Oracle 12c及以上版本支持 id NUMBER GENERATED ALWAYS AS IDENTITY PRIMARY KEY, id NUMBER GENERATED ALWAYS AS IDENTITY (START WITH 1 INCREMENT BY 1) PRIMARY KEY, -- 语法 id NUMBER GENER…...

编程日记 2025/12/27 21:32:09

【KWDB创作者计划】_针对KWDB时序数据库（多副本集群环境）进行压力测试

【KWDB创作者计划】_针对KWDB时序数据库（多副本集群环境）进行压力测试 1. 概述2. 压测环境部署3. 生成测试数据4. 写入性能测试5. 查询性能测试7. 总结 1. 概述 KaiwuDB分布式多模数据库从物联网场景真实需求出发，针对性设计多模架构。物联网…...

编程日记 2025/12/31 3:41:23

极狐GitLab 自定义实例级项目模板功能介绍

极狐GitLab 是 GitLab 在中国的发行版，关于中文参考文档和资料有： 极狐GitLab 中文文档极狐GitLab 中文论坛极狐GitLab 官网自定义实例级项目模板 (PREMIUM SELF) 极狐GitLab 管理员可以将群组设置为在实例上创建新项目时可选择的项目模板的来源。然…...

编程日记 2025/12/11 18:44:54

最新扣子(Coze)案例教程：飞书多维表格按条件筛选记录 + 读取分页Coze工作流，无限循环使用方法，手把手教学，完全免费教程

大家好，我是斜杠君。 👨‍💻 星球群里有同学想学习一下飞书多维表格的使用方法，关于如何通过按条件筛选飞书多维表格中的记录，以及如何使用分页解决最多一次只能读取500条的限制问题。斜杠君今天就带大家一起搭建一…...

编程日记 2025/12/31 5:50:44

第八天 AI开发：NavMesh导航系统对话系统：使用ScriptableObject存储对话数据存档系统：JSON序列化保存数据

一、智能导航系统：NavMesh实战指南 1.1 导航网格基础配置在Unity编辑器中： 选择场景中的静态物体勾选Navigation Static属性打开Window > AI > Navigation窗口烘焙参数设置： NavMeshBuildSettings settings NavMesh.GetSettingsBy…...

编程日记 2025/12/27 15:13:27

Spring AI Alibaba-02-多轮对话记忆、持久化消息记录

Spring AI Alibaba-02-多轮对话记忆、持久化消息记录 Lison <dreamlison163.com>, v1.0.0, 2025.04.19 文章目录 Spring AI Alibaba-02-多轮对话记忆、持久化消息记录多轮对话对话持久-Redis 本次主要聚焦于多轮对话功能的实现，后续会逐步增加更多实用内容&…...

编程日记 2025/12/20 16:44:07

联邦元学习实现个性化物联网的框架

随着数据安全和隐私保护相关法律法规的出台，需要直接在中央服务器上收集和处理数据的集中式解决方案，对于个性化物联网而言，训练各种特定领域场景的人工智能模型已变得不切实际。基于此，中山大学，南洋理工大学&#xf…...

编程日记 2025/12/30 2:49:34

做虚拟化应该怎么选择美国服务器？

选择适合做虚拟化的美国服务器，需要综合考虑硬件性能、网络质量、稳定性、价格和服务支持等多个方面。以下是详细的选购指南，适合准备搭建VPS、虚拟主机、分销业务、开发测试环境、容器集群等用途的用户参考。一、为什么美国服务器适合虚拟化? 美国机房…...

编程日记 2025/12/26 3:14:51

实验1 温度转换与输入输出强化

知识点：input()/print()、分支语句、字符串处理（教材2.1-2.2） 实验任务： 1. 实现摄氏温度与华氏温度互转（保留两位小数） 2. 扩展功能：输入错误处理（如非数字输入提示重新输入&#x…...

编程日记 2025/12/19 18:53:20

MongoDB 集合名称映射问题

项目场景在使用 Spring Data MongoDB 进行开发时，定义了一个名为 CompetitionSignUpLog 的实体类，并创建了对应的 Repository 接口。需要明确该实体类在 MongoDB 中实际对应的集合名称是 CompetitionSignUpLog 还是 competitionSignUpLog。问题描述 …...

编程日记 2025/12/19 8:51:15

【AI】SpringAI 第五弹：接入千帆大模型

1. 添加依赖 <dependency><groupId>org.springframework.ai</groupId><artifactId>spring-ai-starter-model-qianfan</artifactId> </dependency> 2. 编写 yml 配置文件 spring:ai:qianfan:api-key: 你的api-keysecret-key: 你的secr…...

编程日记 2025/12/19 17:09:58

【编码规范】原生开发与 Vue+组件库开发

原生开发 vs Vue组件库开发对比一、原生开发常用方法 DOM操作： document.getElementById()document.querySelector()element.addEventListener()classList API操作类名事件处理： 直接事件绑定事件委托 document.body.addEventListener(click, functi…...

编程日记 2025/12/10 19:47:14