iframe 内容默认不受外部 CSS 影响，因其具有独立文档上下文；同源时可通过内部 link 引入样式或 JS 动态注入，跨域则受安全限制无法操作。
iframe 是一个独立的文档上下文，外部页面的 CSS 样式默认不会穿透作用到 iframe 内部内容上。所以你看到“CSS 只在 iframe 中生效”，其实是因为样式被写在了 iframe 内部（比如通过 <link> 引入），而外部页面的样式无法影响它——这是正常行为，不是 bug。
确保 iframe 内容可被样式控制
如果你希望统一控制 iframe 里的样式，关键在于：iframe 的内容必须是你自己能修改的（同源前提下）。跨域 iframe 无法从外部注入或修改其内部样式，浏览器会阻止这种操作。
- 检查 iframe 的
src是否指向同域地址（如./page.html或http://localhost:3000/content.html） - 如果 src 是第三方域名（如
https://example.com），则无法用父页面 CSS 影响它，这是安全限制 - 同源时，可通过 JavaScript 动态向 iframe 的
<head>插入<link>或<style>
在 iframe 内部单独 link 引入 CSS（推荐做法）
这是最稳妥、最常用的方式：把样式文件明确写在 iframe 页面自身的 HTML 里，就像普通网页一样。
- 打开 iframe 对应的 HTML 文件（如
iframe-content.html） - 在它的
<head>中添加：
<link rel="stylesheet" href="./style.css"> - 确保路径正确（相对路径是相对于 iframe 页面本身的位置，不是父页面）
- 也可用绝对路径或 CDN 链接，避免路径歧义
父页面动态注入样式到同源 iframe
如果不想改 iframe 的 HTML，且确定同源，可用 JS 注入：
立即学习“前端免费学习笔记（深入）”；
- 等 iframe 加载完成：
iframeEl.onload = () => { ... }; - 获取 iframe 的 document：
const doc = iframeEl.contentDocument || iframeEl.contentWindow.document; - 创建 link 标签并插入 head：
const link = doc.createElement('link');
link.rel = 'stylesheet';
link.href = '/common.css';
doc.head.appendChild(link);
避免常见错误
- 不要在父页面写类似
#myIframe p { color: red; }—— 这完全无效，CSS 选择器不能跨 iframe 边界 - 不要用
iframe { width: 100%; }以外的样式试图影响内部元素 - 检查浏览器控制台是否报错：“Blocked a frame with origin … from accessing a cross-origin frame” —— 这说明跨域，只能靠服务端或 postMessage 协作
