第三方CSS重置冲突本质是生效顺序与层级问题，核心解法为顺序控制和层级收口；normalize.css与Bootstrap reboot目标不一致导致样式覆盖异常，须将重置置于样式链最顶端或用@layer reset显式分层。
第三方 CSS 库引入后重置样式冲突，本质是多个重置逻辑叠加或错序，不是“谁更强”，而是“谁先生效、谁覆盖谁”。核心解法只有两个：顺序控制 + 层级收口，其余都是补丁。
为什么 normalize.css 和 bootstrap reboot 一起用会出问题
Normalize.css 保留语义化默认样式（如 button 有 cursor: pointer），而 Bootstrap 的 reboot.css 会覆盖其中一部分（比如强制 button { margin: 0; }）。两者都试图“统一基础”，但目标不一致、规则有重叠，最终结果是部分样式被二次归零或意外强化。
- 典型现象：
input[type="search"]在 Safari 中失去原生搜索图标；h1字号在不同浏览器间忽大忽小；ol列表项缩进异常 - 根本原因：两个重置文件都用了全局选择器（
*、html、body、button等），且未声明层级或作用域 - 别指望构建工具自动去重——PostCSS 插件如
postcss-normalize不处理reboot.css，也不会合并冲突规则
必须确保重置 CSS 在所有框架样式之前加载
重置类库（normalize.css 或 reset.css）的唯一合理位置，是在整个样式链最顶端。任何把它放在 tailwind.css、ant-design.css 或自定义 base.css 之后的行为，都会让它失效。
- HTML 中：
<link rel="stylesheet" href="node_modules/normalize.css/normalize.css">必须排在所有其他<link>前面 - Vite/Webpack 中：
import 'normalize.css'必须写在import 'bootstrap/dist/css/bootstrap.min.css'和import './styles/main.css'之前 - Vue SFC 的
<style>标签不参与全局层叠，不能替代入口处的重置引入 - 检查最终生成的
index.css文件头部，确认normalize.css内容确实在最前面，而不是被 style-loader 插到中间
@layer reset 是目前最可控的重置分层方式
用 @layer 显式声明重置层，能绕过“谁先加载谁赢”的脆弱顺序依赖，把重置逻辑纳入 CSS Cascade Layers 的显式优先级体系。
立即学习“前端免费学习笔记（深入）”；
- 写法示例：
@layer reset { @import 'normalize.css'; } @layer base { @import 'tailwind-base.css'; } @layer components { /* 你的自定义组件样式 */ } - 关键点：
@layer reset必须声明在所有@import之前，否则会被忽略 - 它不解决
!important或高权重选择器（如button.btn.primary）的覆盖问题，只管基础重置层的优先级归属 - 注意兼容性：Chrome 119+、Firefox 120+、Safari 17.4+ 支持，旧版需 PostCSS 插件（如
postcss-cascade-layers）降级处理
遇到重置后仍异常，先查 UA 特定行为再动 CSS
Normalize.css 不处理用户代理（UA）层面的伪类和渲染差异，很多“样式没生效”其实是浏览器原生行为干扰，不是 CSS 冲突。
- 常见 UA 行为：
button:focus在 Chrome 有深色外框、Safari 有蓝色高亮、移动端长按出现半透明蒙层 - 必须手动补充：
button { outline: none; -webkit-appearance: none; }、* {-webkit-tap-highlight-color: transparent;} -
user-select、cursor、resize这些交互属性不在 Normalize 覆盖范围内，得自己加 - 不要用
all: revert或all: unset尝试“一键清空”，它会把第三方库自己的样式也干掉，导致组件功能异常
真正麻烦的从来不是重置本身，而是重置之后没人告诉你要补哪些 UA 行为，以及没人提醒你 @layer 在生产环境里还没全平台就绪——这两点漏掉一个，调试时间翻倍。
