如何在CSS中使用all: unset批量重置选择器继承样式-css教程-PHP中文网

all: unset将可继承属性设为inherit、不可继承属性设为initial，不重置UA默认样式、direction、unicode-bidi及自定义属性；适合组件样式隔离，但需手动补全display、box-sizing等关键声明。

如何在css中使用all: unset批量重置选择器继承样式

all: unset 会清空哪些样式？

all: unset 并不是“清空所有 CSS 属性”，而是将当前元素上**所有可继承属性设为 inherit，所有不可继承属性设为 initial**。这意味着：
– 字体、颜色、行高这类可继承属性，会从父元素继承（不是清掉，是显式继承）；
– display、margin、padding、border 等不可继承属性，则重置为浏览器默认的 initial 值（例如 display: inline、margin: 0）。

它不触碰 direction、unicode-bidi 这类极少用的属性，也不影响自定义属性（--my-var），更不会重置伪元素或动画状态。

什么时候该用 all: unset，而不是 all: initial 或 all: revert？

选 all: unset 的典型场景是：你希望一个组件（比如或自定义卡片）彻底脱离宿主页面的样式污染，但又不想让文字突然变小/变色——即保留语义继承，只剥离盒模型和布局干扰。

all: initial 会让文字变成浏览器默认字号/颜色（通常很小、黑灰），破坏可读性
all: revert 会回退到浏览器 UA 样式表的值，但行为不稳定（Chrome 和 Firefox 对某些属性的 UA 值不同）
all: unset 是目前最可控的“软重置”方案，尤其适合 UI 组件库的根容器

常见踩坑：为什么加了 all: unset 后文字消失了或错位了？

这不是 all: unset 本身的问题，而是它暴露了隐含依赖：

父元素没设 font-size 或 color，子元素继承后变成 inherit → 实际渲染为 16px / #000，但若父级被其他规则压制（如 color: transparent），子元素也会透明
display 被重置为 initial（即 inline），导致原本块级的 变成内联，换行失效
用了 all: unset 却忘了手动恢复必要样式，比如 box-sizing: border-box（它的 initial 值是 content-box）


推荐组合写法：

											
												
												
													CSS工具箱(专业版)
													全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。
												
												下载
												
											
										
.card {
  all: unset;
  box-sizing: border-box;
  display: block;
}
兼容性和性能要注意什么？
all 属性在 Chrome 37+、Firefox 27+、Safari 9.1+ 支持，IE 完全不支持——如果需兼容 IE，不能只靠 all: unset，得配合传统重置（如 margin: 0; padding: 0;）。
性能上没有明显开销，但它会强制重置整个样式层叠链，所以别滥用在高频更新的动画元素上；更关键的是，它会让 DevTools 的“Computed”面板里大量属性显示为 inherited 或 initial，排查具体来源时需要多点一层“Styles”看原始声明。
真正难处理的，其实是那些你根本没意识到正在继承的属性，比如 text-rendering 或 font-kerning ——它们被 unset 后变成 initial，可能让文字渲染变模糊，但你很难第一时间定位到。