【H5 前端开发笔记】第 23 期CSS 层叠样式表 —— 继承关系详解CSS 的继承Inheritance是层叠Cascade机制中非常核心的一部分。它决定了当子元素没有显式设置某个属性时会自动从父元素继承什么值。理解继承能帮你少写 30%50% 的重复 CSS同时避免很多“为什么子元素没变色/没改字体”的困惑。一、继承的基本规则2026 年现状继承只向下传播从父 → 子 → 孙……永远不向上只有部分属性默认继承大多数文本/字体/排版相关属性会继承盒模型、布局、背景、定位相关基本不继承。初始值initial非继承属性没写时取规范定义的初始值通常是 0、auto、none 等计算值computed value继承时传的是父元素的计算值经过单位换算、百分比解析后的值强制继承任何属性都可以写inherit来强制从父级拿值全部重置all: inherit | initial | unset | revert二、常见继承 vs 非继承属性对比表高频记忆版类别继承Inherited: yes非继承Inherited: no常见属性备注 / 为什么这样设计颜色colorbackground-color,border-color等文本颜色统一背景各元素独立字体font-family,font-size,font-weight,font-style,font-variant,line-height,letter-spacing,word-spacing,text-align,text-indent,white-space,text-transformfont-size-adjust部分浏览器、font-stretch等少数保持文档阅读一致性文本装饰—text-decoration影响子元素但不继承值、text-shadow装饰通常针对具体元素列表list-style-type,list-style-position,list-style-image,list-style—ul/ol 风格统一表格border-collapse,border-spacing,caption-side,empty-cellsborder,padding单元格独立表格边框/间距常需统一方向/语言direction,text-orientation,writing-mode—国际化布局一致光标/可见性cursor,visibilityopacity不继承但影响视觉cursor 常希望全局一致盒模型/布局—margin,padding,border,width,height,min/max-*,box-sizing,display,position,float,clear,overflow,z-index每个元素盒子独立避免混乱背景—background,background-*全家桶背景是元素个性其他quotes,orphans,widows打印相关transform,transition,animation,filter,clip-path动画/变换针对单个元素最常继承的 Top 8背下来就够用 90% 场景colorfont-familyfont-sizeline-heighttext-aligncursorvisibilitylist-style三、代码演示敲一遍最有感觉!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8titleCSS 继承演示/titlestyle/* 根元素设置 → 几乎全站生效 */:root, html{font-family:system-ui,Segoe UI,sans-serif;font-size:16px;/* 继承给所有元素 */line-height:1.6;/* 继承 */color:#333;/* 继承 */text-align:justify;/* 继承 */cursor:default;/* 继承 */}body{max-width:900px;margin:2rem auto;padding:1rem;background:#f8f9fa;/* 不继承body 自己有背景 */}article{border:2px solid #4caf50;/* 不继承子元素不会自动有边框 */padding:1.5rem;background:white;/* 不继承 */}h1, h2{color:#1976d2;/* 覆盖继承的 #333 */}.special{color:#d32f2f;/* 只影响 .special 及其后代 */font-size:1.4em;/* 后代字体变大相对继承 */}button, input, select, textarea{/* 表单元素默认不从父级继承很多样式浏览器 user agent 样式表干预 */font-family:inherit;/* 强制继承字体 */font-size:inherit;/* 强制继承字号 */color:inherit;/* 强制继承颜色 */line-height:inherit;}/* 强制所有属性继承慎用 */.force-inherit *{all:inherit;}/* 重置为初始值 */.reset{all:initial;/* 几乎所有属性回浏览器默认 */}/style/headbodyarticleh1文章标题蓝色覆盖了继承的 #333/h1p这段文字继承了 html 的 color、font-family、line-height、text-align 等。/pdivclassspecialp这个块的颜色是红色字号变大 → 它的子元素也会继承红色和 1.4em 字号。/pspan内联 span 也红 大字号/span/divp回到普通段落又变回 #333 和 16px。/pbutton普通按钮没强制 inherit 前可能用系统字体/button/articledivclassforce-inheritstyleborder:3px dashed orange;padding:1rem;background:#fff3e0;p这里强制 all: inherit → 会继承父级的 border、padding、background慎用/p/div/body/html四、高频面试/实战问题解答为什么表单元素字体不跟 body 一样→ 浏览器对 input/button 等有独立的 user agent 样式表默认不继承或部分覆盖。用font: inherit;等强制。font-size 是如何继承的→ 传计算值px。子元素font-size: 1.2em是相对于父元素的计算值算的。line-height 的特殊性→ 如果父级写line-height: 1.5无单位子级继承的是倍数 1.5而非计算后的 px 值更灵活。如何一键重置所有继承→all: revert;最接近用户期望或all: initial;自定义属性–var继承吗→ 默认继承除非用property显式设inherits: false;下一期预告CSS 层叠Cascade完整机制 特异性计算 layer 实战有继承相关的迷惑场景比如 visibility vs display、text-decoration 诡异行为等欢迎留言祝大家 CSS 继承玩得明白少踩坑
【H5 前端开发笔记】第 23 期：CSS层叠样式表 继承关系
【H5 前端开发笔记】第 23 期CSS 层叠样式表 —— 继承关系详解CSS 的继承Inheritance是层叠Cascade机制中非常核心的一部分。它决定了当子元素没有显式设置某个属性时会自动从父元素继承什么值。理解继承能帮你少写 30%50% 的重复 CSS同时避免很多“为什么子元素没变色/没改字体”的困惑。一、继承的基本规则2026 年现状继承只向下传播从父 → 子 → 孙……永远不向上只有部分属性默认继承大多数文本/字体/排版相关属性会继承盒模型、布局、背景、定位相关基本不继承。初始值initial非继承属性没写时取规范定义的初始值通常是 0、auto、none 等计算值computed value继承时传的是父元素的计算值经过单位换算、百分比解析后的值强制继承任何属性都可以写inherit来强制从父级拿值全部重置all: inherit | initial | unset | revert二、常见继承 vs 非继承属性对比表高频记忆版类别继承Inherited: yes非继承Inherited: no常见属性备注 / 为什么这样设计颜色colorbackground-color,border-color等文本颜色统一背景各元素独立字体font-family,font-size,font-weight,font-style,font-variant,line-height,letter-spacing,word-spacing,text-align,text-indent,white-space,text-transformfont-size-adjust部分浏览器、font-stretch等少数保持文档阅读一致性文本装饰—text-decoration影响子元素但不继承值、text-shadow装饰通常针对具体元素列表list-style-type,list-style-position,list-style-image,list-style—ul/ol 风格统一表格border-collapse,border-spacing,caption-side,empty-cellsborder,padding单元格独立表格边框/间距常需统一方向/语言direction,text-orientation,writing-mode—国际化布局一致光标/可见性cursor,visibilityopacity不继承但影响视觉cursor 常希望全局一致盒模型/布局—margin,padding,border,width,height,min/max-*,box-sizing,display,position,float,clear,overflow,z-index每个元素盒子独立避免混乱背景—background,background-*全家桶背景是元素个性其他quotes,orphans,widows打印相关transform,transition,animation,filter,clip-path动画/变换针对单个元素最常继承的 Top 8背下来就够用 90% 场景colorfont-familyfont-sizeline-heighttext-aligncursorvisibilitylist-style三、代码演示敲一遍最有感觉!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8titleCSS 继承演示/titlestyle/* 根元素设置 → 几乎全站生效 */:root, html{font-family:system-ui,Segoe UI,sans-serif;font-size:16px;/* 继承给所有元素 */line-height:1.6;/* 继承 */color:#333;/* 继承 */text-align:justify;/* 继承 */cursor:default;/* 继承 */}body{max-width:900px;margin:2rem auto;padding:1rem;background:#f8f9fa;/* 不继承body 自己有背景 */}article{border:2px solid #4caf50;/* 不继承子元素不会自动有边框 */padding:1.5rem;background:white;/* 不继承 */}h1, h2{color:#1976d2;/* 覆盖继承的 #333 */}.special{color:#d32f2f;/* 只影响 .special 及其后代 */font-size:1.4em;/* 后代字体变大相对继承 */}button, input, select, textarea{/* 表单元素默认不从父级继承很多样式浏览器 user agent 样式表干预 */font-family:inherit;/* 强制继承字体 */font-size:inherit;/* 强制继承字号 */color:inherit;/* 强制继承颜色 */line-height:inherit;}/* 强制所有属性继承慎用 */.force-inherit *{all:inherit;}/* 重置为初始值 */.reset{all:initial;/* 几乎所有属性回浏览器默认 */}/style/headbodyarticleh1文章标题蓝色覆盖了继承的 #333/h1p这段文字继承了 html 的 color、font-family、line-height、text-align 等。/pdivclassspecialp这个块的颜色是红色字号变大 → 它的子元素也会继承红色和 1.4em 字号。/pspan内联 span 也红 大字号/span/divp回到普通段落又变回 #333 和 16px。/pbutton普通按钮没强制 inherit 前可能用系统字体/button/articledivclassforce-inheritstyleborder:3px dashed orange;padding:1rem;background:#fff3e0;p这里强制 all: inherit → 会继承父级的 border、padding、background慎用/p/div/body/html四、高频面试/实战问题解答为什么表单元素字体不跟 body 一样→ 浏览器对 input/button 等有独立的 user agent 样式表默认不继承或部分覆盖。用font: inherit;等强制。font-size 是如何继承的→ 传计算值px。子元素font-size: 1.2em是相对于父元素的计算值算的。line-height 的特殊性→ 如果父级写line-height: 1.5无单位子级继承的是倍数 1.5而非计算后的 px 值更灵活。如何一键重置所有继承→all: revert;最接近用户期望或all: initial;自定义属性–var继承吗→ 默认继承除非用property显式设inherits: false;下一期预告CSS 层叠Cascade完整机制 特异性计算 layer 实战有继承相关的迷惑场景比如 visibility vs display、text-decoration 诡异行为等欢迎留言祝大家 CSS 继承玩得明白少踩坑
