重置样式被框架覆盖的根本原因是CSS加载顺序决定层叠优先级，需确保reset.css在框架CSS前引入；Bootstrap 5的reboot.css与自定义重置易冲突；Tailwind已内置等效重置；iOS表单控件需针对性覆盖UA样式。
为什么重置样式总被框架样式覆盖
根本原因是 CSS 加载顺序决定层叠优先级，reset.css 或 normalize.css 如果放在响应式框架（如 Bootstrap、Tailwind、Foundation）之后引入，框架里带权重的通用选择器（比如 * { box-sizing: border-box; }）会直接覆盖你的重置规则。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查 HTML 中
<link>标签顺序，确保重置文件在框架 CSS 文件之前 - 不要把重置代码写进框架的自定义 CSS 文件里——它天然晚于框架主样式表
- 如果用构建工具（Vite/Webpack），确认
import顺序：先import './reset.css';，再import 'bootstrap/dist/css/bootstrap.min.css';
Bootstrap 5 的 reboot.css 和你自己的重置冲突吗
会。Bootstrap 5 自带的 reboot.css 已经是轻量重置，它包含 html、body、h1–h6、button 等基础样式重设。如果你额外加了 normalize.css 或手写重置，很可能重复干预同一元素，导致字体大小、行高、margin 表现不一致。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 禁用 Bootstrap 内置重置：只引入
bootstrap-grid.css+bootstrap-utilities.css，跳过bootstrap-reboot.css - 若必须用完整 Bootstrap，就别再引入
normalize.css—— 二者目标重合度太高 - 验证方式：打开 DevTools，选中
h1，看 computed styles 里margin-top是来自reboot.css还是你自己的 reset
Tailwind 用户要不要写重置代码
不需要单独写。Tailwind 的 @layer base 默认已包含等效重置逻辑（通过 @tailwind base 注入），它会生成类似 * { box-sizing: border-box; }、html { line-height: 1.5; } 的规则，并且按设计就是最早应用的。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保
@tailwind base出现在你所有自定义 CSS 的最顶部（哪怕你写了@layer base） - 不要在
@layer base里重复设置box-sizing或font-size，除非你明确要覆盖 Tailwind 默认值 - 如果用了
preflight（默认开启），它已替代传统 reset；关掉它需在tailwind.config.js中设置corePlugins.preflight: false，但不推荐
移动端 Safari 下重置失效的典型表现
常见现象是 input[type="number"] 或 textarea 在 iOS 上仍有默认内边距/圆角，或 button 字体继承异常——这不是重置没生效，而是 Safari 对表单控件有独立 UA 样式，且部分规则无法被普通重置覆盖（例如 -webkit-appearance: none 必须显式声明）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 对表单控件单独补丁：
input, textarea, select, button { -webkit-appearance: none; } - 避免依赖通配符重置：
* { margin: 0; }对 iOS 表单无效，得具体到元素 - 用
user-agent-stylesheet检查 DevTools 的 Styles 面板底部，确认哪些样式来自 UA，再针对性覆盖
事情说清了就结束。真正麻烦的不是加不加重置，而是搞不清哪一行被哪个源覆盖了——多看 DevTools 里的 “Computed” 和 “Styles” 面板，比背规则管用。
