CSS通配符选择器\*的使用与优化技巧

虽然通配符选择器 `*` 重置默认样式看似简洁高效，能一键清除 margin、padding 并统一 box-sizing，但它会无差别破坏表单控件（如 button、input、select、textarea）的原生间距、交互行为与可访问性，导致按钮文字紧贴边框、下拉箭头消失、增减按钮不可见、焦点轮廓丢失等严重问题；现代开发更推荐精准重置布局容器（如 body、heading、列表、段落），或直接采用经过验证的 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 的实现并不一致。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~