CSS 学习手册
免费学习
完整知识体系
快速检索
CSS学习手册《CSS 层叠与继承》：**层叠（Cascading）**：当多个样式规则应用于同一元素时，浏览器按照以下顺序确定最终样式： 1. 声明的重要性（!important 最高） 2. 选择器的特异性（权重） 3. 代码中的出现顺序（后定义覆盖先定义） **特异性权...
CSS 基础
CSS 层叠与继承
【详细说明 & 代码示例】
**层叠（Cascading）**：当多个样式规则应用于同一元素时，浏览器按照以下顺序确定最终样式：
1. 声明的重要性（!important 最高）
2. 选择器的特异性（权重）
3. 代码中的出现顺序（后定义覆盖先定义）
**特异性权重计算：**
- 内联样式：权重 1000
- ID 选择器：权重 0100
- 类选择器/属性选择器/伪类：权重 0010
- 元素选择器/伪元素：权重 0001
**继承（Inheritance）**：某些属性（如 color、font-family、line-height）默认从父元素传递给子元素，但宽度、高度、边距等通常不继承。
**示例：**
```css
/* 权重演示 */
#nav a { color: red; } /* 权重 0101 */
.nav-link { color: blue; } /* 权重 0010 */
a { color: green; } /* 权重 0001 */
/* 最终链接颜色为红色，因为 ID 选择器权重最高 */
/* 继承示例 */
.parent { color: gray; font-size: 18px; }
/* 子元素会继承 color 和 font-size，除非自己覆盖 */
```
学习提示：建议打开浏览器开发者工具（F12），在 Elements 面板中实时调试样式，动手实践效果更佳。
全部章节目录（共 55 个知识点）
布局 (2个知识点)
Flexbox 布局 (3个知识点)
定位 (2个知识点)
过渡与动画 (2个知识点)
变换 (1个知识点)
响应式设计 (2个知识点)
CSS 预处理器 (2个知识点)
CSS 框架 (2个知识点)
高级特性 (6个知识点)
性能优化 (2个知识点)
CSS 函数 (2个知识点)
CSS 数学 (1个知识点)
CSS 逻辑 (1个知识点)
CSS 滚动 (1个知识点)
CSS 遮罩 (1个知识点)
CSS 混合模式 (1个知识点)
CSS 书写模式 (1个知识点)
CSS 布局（旧） (1个知识点)
使用说明
- • 本手册涵盖 CSS 从入门到进阶的完整知识体系
- • 在搜索框输入关键词，快速定位相关知识点
- • 点击条目标题进入详情页，查看详细说明与代码示例
- • 页面按分类展示所有知识点，方便系统性学习
- • 建议打开浏览器开发者工具（F12）实时调试样式，加深理解