不可行。* 选择器会破坏表单控件的原生样式与可访问性,导致按钮无内边距、下拉箭头偏移、数字输入增减按钮消失等问题;应仅重置布局容器,或采用 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;
}这样既消除了 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 的实现并不一致。









