iframe天然隔离CSS，但子页面主动引入父级样式、innerHTML注入style标签或使用全局选择器会导致外部影响；确保独立需切断样式引入路径并避免运行时污染。
iframe 嵌套本身就能天然隔离 CSS，但前提是别手动破坏它——比如在子页面里误引外层样式、或用 innerHTML 往 iframe 的 document 里塞带 <style> 的 HTML。
iframe 内部 CSS 为什么还会被外层影响？
根本原因不是 iframe 隔离失效，而是人为绕过了隔离边界：
- 子页面 HTML 中显式
<link rel="stylesheet" href="frame.css">—— 这等于主动把外层样式拉进 iframe 作用域 - 父页面用
iframe.contentDocument.write()或innerHTML注入含<style>的字符串，而没走CSSStyleSheet注入流程 - 子页面用了全局选择器（如
body、html、*:not(...)），又没重置 UA 样式，导致字体、margin 等继承自父页面的渲染上下文（尤其在 Safari/旧 Edge 中）
如何确保 iframe 内 CSS 真正独立？
关键动作只有两个：切断样式引入路径 + 避免运行时污染。
- 子页面 HTML 中**不引入任何父级 CSS 文件**，只加载自己专属的
content.css - 子页面的
<head>里加reset类基础样式（如*, *::before, *::after { box-sizing: border-box; }），避免依赖父页面 UA 行为 - 如果必须动态注入样式（比如微前端场景），用
DOMParser解析 HTML 字符串，提取<style>的textContent，再通过new CSSStyleSheet()+adoptedStyleSheets注入，**绝不用innerHTML = '...<style>...'** - 禁用子页面中所有
!important覆盖，否则可能穿透 shadow boundary（若外层用了 Shadow DOM）
为什么不能靠选择器权重硬扛冲突？
在 iframe 场景下，提升选择器权重（比如加 #iframe-root .btn）是无效的——因为 iframe 的 document 是独立环境，父页面的 CSS 根本无法匹配到 iframe 内部元素。你看到的“冲突”，99% 是以下两种情况之一：
立即学习“前端免费学习笔记（深入）”；
- 子页面自己加载了两份样式表（
frame.css+content.css），造成内部覆盖 - 父页面 JS 通过
iframe.contentDocument直接操作了子页面 DOM 并挂了 class，但没同步清理对应样式逻辑
真正需要警惕的是那些“看起来没引入却生效”的样式：检查子页面是否漏掉了 <meta name="viewport"> 导致缩放异常，或用了 rem 单位但根字体大小被父页面 JS 动态改过。
