CSS重置：\*选择器清除默认样式

用 * 选择器全局重置 CSS 默认样式看似省事，实则隐患重重：它会粗暴抹除表单控件（如按钮、输入框、下拉菜单）的原生内边距、下拉箭头、增减按钮及可访问性支持，导致界面错乱、交互失效甚至无障碍退化；真正稳健的做法是精准重置布局容器（如 body、标题、段落、列表），保留表单与语义元素的浏览器默认行为，或采用 Modern CSS Reset 等经过实战验证的现代方案——告别“一刀切”，拥抱有分寸的样式控制。

用 * 选择器重置样式真的可行吗

不可行。虽然 * { margin: 0; padding: 0; } 看似简单粗暴，但它会重置所有元素（包括 input、button、textarea、select 等表单控件）的原生间距和盒模型，导致表单元素视觉错乱、点击区域异常、甚至在某些浏览器中失去可访问性。

* 重置对表单元素的破坏性表现

典型问题包括：

• button 和 input[type="submit"] 失去默认内边距，文字紧贴边框
• textarea 的默认 resize 行为可能被干扰，拖拽失效
• select 下拉箭头在 Safari/Chrome 中偏移或消失
• input[type="number"] 的增减按钮在 Firefox 中不可见
• 屏幕阅读器依赖的默认 focus outline 被意外覆盖

更安全的替代方案：仅重置容器类元素

只针对真正需要“清空”的布局容器，避免触碰表单、媒体、语义化文本元素：

/* 清除常见块级容器的默认外边距 */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
ul, ol, dl, figure, hr {
  margin: 0;
}
<p>/<em> 清除列表项和描述列表的默认缩进与间距 </em>/
ul, ol, li, dd, dt {
padding: 0;
}</p><p>/<em> 重置 heading 和段落的字体继承，但保留表单元素默认 font-family/size </em>/
h1, h2, h3, h4, h5, h6, p {
font-size: inherit;
font-weight: inherit;
}</p>

这样既消除了 h1 的巨大上下边距、ul 的左侧缩进等干扰布局的默认值，又保留了 input、button 等元素的浏览器原生样式完整性。

真正需要全局重置时，优先用现代 CSS 重置库

如果项目确实要求高度一致的起点（如设计系统、组件库），应使用经过验证的轻量方案，例如 Andy Bell 的 Modern CSS Reset 或 normalize.css 的裁剪版。它们明确区分：

• 哪些样式要「移除」（如 body 的 margin）
• 哪些要「标准化」（如 button 的 cursor 和 appearance）
• 哪些必须「保留」（如 textarea 的 vertical-align 和 resize）

直接写 * { all: unset; } 是最危险的捷径——它连 display 都重置了，span 变成 display: inline？不，它变成 display: none，因为 unset 在 display 上回退到初始值 inline，但很多浏览器对 all: unset 的实现并不一致。

本篇关于《CSS重置：\*选择器清除默认样式》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！