iframe内css不影响父页面是因为其样式仅作用于自身文档，浏览器出于安全隔离禁止反向注入；同源时可通过js提取并插入父页head，但因路径、权重、fouc及跨域限制等问题不推荐，应统一引入外部样式文件。
iframe里加的CSS为什么影响不到父页面
因为 iframe 是独立文档上下文，它的 和 <style></style> 只作用于自身 document，浏览器根本不会把里面的样式规则“反向注入”到父页面。这不是 bug，是安全隔离的强制行为。
想让父页面用上 iframe 里的样式？别这么干
常见错误操作包括：document.querySelector('iframe').contentDocument.head.innerHTML += '<style>body{color:red}</style>'，然后指望父页 body 变红——完全无效。父页面的渲染引擎压根不读 iframe 内部的样式表，<style></style> 或 <link> 标签只对它所在的 document 生效。
真正能同步样式的只有 JS 驱动的显式复制
如果你控制着 iframe 和父页面（同源前提下），可以用脚本把 iframe 中的样式规则提取出来，再手动插入父页面 ：
- 用
iframe.contentDocument.styleSheets遍历所有 CSSStyleSheet 对象 - 对每个 sheet 调用
cssRules（注意捕获SecurityError） - 逐条读取
cssRules[i].cssText，拼成字符串后创建新<style></style>标签 - 插入父页面
document.head，而非 iframe 的 head
示例关键逻辑：
const iframe = document.getElementById('myIframe');
iframe.addEventListener('load', () => {
const iframeDoc = iframe.contentDocument;
const parentHead = document.head;
Array.from(iframeDoc.styleSheets).forEach(sheet => {
try {
const style = document.createElement('style');
style.textContent = Array.from(sheet.cssRules)
.map(rule => rule.cssText)
.join('\n');
parentHead.appendChild(style);
} catch (e) {
// 跨域 stylesheet 会抛 SecurityError，跳过
}
});
});
为什么这招很少用、也不推荐
实际项目中几乎没人靠这个同步样式，因为：
- iframe 里可能有
@import、url()字体或图片，这些路径在父页面上下文中大概率 404 - 选择器权重和作用域会混乱，比如 iframe 里写
.btn { color: blue }，父页已有.btn { color: red }，结果不可控 - 动态插入大量
<style></style>标签会导致 FOUC 或重排开销，尤其在 iframe 频繁 reload 时 - 一旦 iframe 跨域，
sheet.cssRules直接不可读，整个流程中断
真正该做的，是把公共样式抽成独立文件，在父页和 iframe 页面里各自 <link rel="stylesheet"> 引入——路径用绝对 URL 或 CDN，避免相对路径解析歧义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
