小白前端别慌：3分钟搞懂CSS继承性，告别样式乱套（附避坑指南）-程序员充电站

小白前端别慌：3分钟搞懂CSS继承性，告别样式乱套（附避坑指南）

小白前端别慌：3分钟搞懂CSS继承性，告别样式乱套（附避坑指南）
- 先整点颜色瞧瞧——“我明明写了color，咋还是黑坨坨？”
- 继承到底是啥？说人话版
- 哪些属性是“乖宝宝”？一张表背完算我输
- 继承突然罢工？90%踩的是这三个坑
- - 坑1：权重打架，爹说话不算数
  - 坑2：浏览器自带样式（User Agent）横插一脚
  - 坑3：爹自己也没值， inherit 了个寂寞
- 偷懒神器：用继承写一套“全局皮肤”
- inherit、initial、unset——三兄弟的恩怨情仇
- - inherit：强行“啃老”
  - initial：一键恢复出厂设置
  - unset：看爹心情，爹有就继承，爹没有就initial
- 彩蛋：自定义属性+继承链，玩出“俄罗斯套娃”
- 实战排查三板斧，妈妈再也不怕我调样式
- 写在最后的碎碎念

小白前端别慌：3分钟搞懂CSS继承性，告别样式乱套（附避坑指南）

友情提示：本文全程嘴碎，代码管饱，阅读时建议左手奶茶，右手F12，边撸边骂，效果最佳。

先整点颜色瞧瞧——“我明明写了color，咋还是黑坨坨？”

第一次写页面，谁没干过这种蠢事：

<body><h1>我是标题</h1><p>我是段落</p></body>

body{color:#ff5a5f;/* Airbnb红，骚气 */}

刷新一看，标题红了，段落也红了，心里嘿嘿“原来这就是全局变量啊”。
接着你给<h1>单独加了个类：

.title{color:#00b894;/* 原谅绿 */}

结果一瞅，标题绿了，段落依旧红，于是你拍着桌子骂：“CSS就这？我明明只改了标题，凭啥段落不听话？”
——兄弟，别骂，这就是继承的“亲儿子效应”：
color能继承，但只会往下传，不会往回走，也不会拐弯。
标题自己有了新颜色，就不管下面的小弟了，懂？

继承到底是啥？说人话版

官方定义：
“继承是CSS的一个机制，允许某些属性在DOM树中从父元素传递给子元素，减少重复代码。”

人话翻译：
爹有的，儿子可以蹭；爹没的，儿子别惦记；儿子自己买了，就不用再蹭爹的。

再整一段代码感受下：

<divclass="dad">爹：我有字体18px、颜色蓝色、字重700<pclass="son">儿子：我啥也没写，但看起来和爹一样<spanclass="grandson">孙子：我也一样，躺赢</span></p></div>

.dad{font-size:18px;color:blue;font-weight:700;border:1px solid #000;/* 这条不会往下传 */}

打开控制台一看，孙子三代同堂，字体颜色一模一样，但谁也没继承到那条border，因为border是“叛逆少年”，不认爹。

哪些属性是“乖宝宝”？一张表背完算我输

很多人让你“背”继承表，我偏不，咱直接上代码，跑一遍就刻在DNA里。

<sectionclass="inherit-gang"><h2>继承小队：font、color、text、visibility</h2><p>我是一段话，<em>内部再套一层</em>，看看谁偷懒谁干活。</p></section>

.inherit-gang{/* 以下全部可继承 */font-family:"MaoBi",KaiTi,serif;/* 字体 */font-size:2rem;/* 字号 */font-weight:900;/* 字重 */line-height:1.6;/* 行高 */color:#e17055;/* 颜色 */text-align:center;/* 对齐 */text-indent:2em;/* 首行缩进 */letter-spacing:0.05em;/* 字间距 */visibility:hidden;/* 可见性 *//* 以下不可继承 */border:5px dashed #74b9ff;padding:20px;margin:20px;width:50%;background:#ffeaa7;}

打开浏览器，整个section消失（visibility:hidden 把子元素一起藏了），但border、padding、margin、width、background谁也没蹭到，子元素如果想有背景，得自己写。

继承突然罢工？90%踩的是这三个坑

坑1：权重打架，爹说话不算数

<articleclass="post"><pid="intro"class="text">我到底是什么颜色？</p></article>

.post p{color:red;}/* 0-0-2 */#intro{color:blue;}/* 1-0-0 */

结果蓝了，爹被id选择器一巴掌拍在地上。
继承的优先级≈0，任何正经选择器都能欺负它。

坑2：浏览器自带样式（User Agent）横插一脚

<ahref="">链接颜色能继承吗？</a>

body{color:#6c5ce7;}

刷新一看，链接还是浏览器默认蓝。
别急着骂娘，<a>在UA里自带：

a:-webkit-any-link{color:-webkit-link;}

人家是**“自带钢印”的叛逆少年**，想让它听爹的话，得手动把钢印抠掉：

a{color:inherit;}/* 乖，把爹的颜色穿上 */

坑3：爹自己也没值， inherit 了个寂寞

.dad{/* color没写 */}.son{color:inherit;/* 爹都没钱，儿子当然继承不到 */}

控制台一看，son的color是**“rgba(0,0,0,0.8)”**——浏览器兜底色，inherit不是印钞机，爹穷儿子只能裸奔。

偷懒神器：用继承写一套“全局皮肤”

做后台系统，最烦就是每个组件写一遍字体。老司机这样撸：

/* 设计代币一步到位 */:root{--font-main:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;--text-color:#343a40;--link-color:#4263eb;--line-height:1.5;}/* 全局只写一次 */body{font-family:var(--font-main);color:var(--text-color);line-height:var(--line-height);}/* 链接统一收口 */a{color:var(--link-color);text-decoration:none;}a:hover{text-decoration:underline;}/* 以后新增组件啥也不用管，直接躺 */.card, .modal, .table{/* 啥也不写，字体颜色行高全继承 */}

整套系统几百个组件，一行font-family都没重复，爽到飞起。
但别忘了——input、button、select这些“表单三傻”在UA里被单独定义过，想继承得手动reset：

input, button, select, textarea{font-family:inherit;color:inherit;line-height:inherit;}

inherit、initial、unset——三兄弟的恩怨情仇

inherit：强行“啃老”

.dad{border:2px solid #000;}.son{border:inherit;/* 儿子也要同款边框 */}

注意：inherit只能继承爹的“计算值”，如果爹的border是2px solid #000，儿子拿到的也是2px solid #000，不管儿子自己有没有设置border-width，别幻想“只继承颜色”。

initial：一键恢复出厂设置

p{margin:0;/* 先把浏览器默认16px margin干掉 */}p.special{margin:initial;/* 又变回16px，气不气？ */}

initial把属性打回UA默认值，不是父元素值，别搞混。

unset：看爹心情，爹有就继承，爹没有就initial

.grandson{color:unset;/* 如果爹有color，就继承；没有就变回浏览器默认黑 */margin:unset;/* margin不可继承，所以直接initial，变回0 */}

一句话总结：
inherit=啃老，initial=失忆，unset=看爹有没有退休金。

彩蛋：自定义属性+继承链，玩出“俄罗斯套娃”

:root{--theme-color:#ff0055;}body{--theme-color:inherit;/* 继承:root */}article{--theme-color:inherit;/* 继承body */}h2{color:var(--theme-color);/* 一路套娃下来，拿到#ff0055 */}

中间任何一级可以**“半路改遗嘱”**：

section.crazy{--theme-color:#00ff99;/* 后代全变绿 */}

自定义属性天生可继承，搭配unset还能玩出“消失的颜色”：

.crazy h2{--theme-color:unset;/* 回到初始值，浏览器黑 */}

实战排查三板斧，妈妈再也不怕我调样式

F12 → Computed → 输入color/margin/whatever
看“Rendered value”是谁给的，点击右侧小箭头直接跳源码，一秒锁定凶手。
Filter里输入“inherit”
快速定位哪些属性写了inherit，防止“爹没值”的尴尬。
console里敲
```
getComputedStyle($0).color
```
选中元素，回车，最终计算值明明白白，别再怀疑人生。

写在最后的碎碎念

CSS继承就像家庭关系：

爹有钱（有值），儿子才能啃老；
儿子暴富（自己写了样式），就自立门户；
儿子想体验贫民生活（initial），或者回头啃老（inherit），全看心情；
一旦牵扯到!important，那就是家族大战，谁拳头硬谁说话。

别再一言不合就!important，那玩意儿相当于“把房子点了大家谁都别住”。
先瞅一眼继承链，再决定要不要拔刀，写CSS和谈恋爱一样，讲理别耍横。

好了，3分钟到，下课。
下回谁再问你“为啥我写的样式不生效”，直接把这篇文章甩过去，让他自己啃老。

欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

推荐：DTcode7的博客首页。
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

专栏系列（点击解锁）	学习路线(点击解锁）	知识定位
《微信小程序相关博客》	持续更新中~	结合微信官方原生框架、uniapp等小程序框架，记录请求、封装、tabbar、UI组件的学习记录和使用技巧等
《AIGC相关博客》	持续更新中~	AIGC、AI生产力工具的介绍，例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结
《HTML网站开发相关》	《前端基础入门三大核心之html相关博客》	前端基础入门三大核心之html板块的内容，入坑前端或者辅助学习的必看知识
	《前端基础入门三大核心之JS相关博客》	前端JS是JavaScript语言在网页开发中的应用，负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客，共同构建用户界面。通过操作DOM元素、响应事件、发起网络请求等，JS使页面能够响应用户行为，实现数据动态展示和页面流畅跳转，是现代Web开发的核心
	《前端基础入门三大核心之CSS相关博客》	介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法，同时收集精美的CSS效果代码，用来丰富你的web网页
	《canvas绘图相关博客》	Canvas是HTML5中用于绘制图形的元素，通过JavaScript及其提供的绘图API，开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力，使得前端绘图技术更加丰富和多样化
《Vue实战相关博客》	持续更新中~	详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅
《python相关博客》	持续更新中~	Python，简洁易学的编程语言，强大到足以应对各种应用场景，是编程新手的理想选择，也是专业人士的得力工具
《sql数据库相关博客》	持续更新中~	SQL数据库：高效管理数据的利器，学会SQL，轻松驾驭结构化数据，解锁数据分析与挖掘的无限可能
《算法系列相关博客》	持续更新中~	算法与数据结构学习总结，通过JS来编写处理复杂有趣的算法问题，提升你的技术思维
《IT信息技术相关博客》	持续更新中~	作为信息化人员所需要掌握的底层技术，涉及软件开发、网络建设、系统维护等领域的知识
	《信息化人员基础技能知识相关博客》	无论你是开发、产品、实施、经理，只要是从事信息化相关行业的人员，都应该掌握这些信息化的基础知识，可以不精通但是一定要了解，避免日常工作中贻笑大方
	《信息化技能面试宝典相关博客》	涉及信息化相关工作基础知识和面试技巧，提升自我能力与面试通过率，扩展知识面
《前端开发习惯与小技巧相关博客》	持续更新中~	罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等
《photoshop相关博客》	持续更新中~	基础的PS学习记录，含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结
日常开发&办公&生产【实用工具】分享相关博客》	持续更新中~	分享介绍各种开发中、工作中、个人生产以及学习上的工具，丰富阅历，给大家提供处理事情的更多角度，学习了解更多的便利工具，如Fiddler抓包、办公快捷键、虚拟机VMware等工具