iframe 内部 dom 完全不受父页面 css 影响，同源时需通过 load 事件向其 document 动态注入 style；跨源则只能用 postmessage 通信，由内部自行处理样式。
因为 iframe 是独立文档上下文，浏览器根本不会把外层 CSS 选择器“穿透”进去匹配内部元素——这不是 bug，是同源策略和样式作用域隔离的强制行为。
iframe 内部 DOM 完全不受父页面 CSS 选择器影响
写 .my-iframe .btn 这类选择器，浏览器解析时只在父页面 DOM 树里找匹配节点；iframe 内部的 .btn 属于另一个 document，压根不在这个查找范围内。哪怕 iframe 同源，CSS 也跨不过这道边界。
- 外部样式表、
<style></style>标签、内联style属性，全部对 iframe 内容无效 - DevTools 的 Elements 面板里选中 iframe 内元素，右侧 Styles 面板根本不会显示任何来自父页面的规则
- 试图用
!important强行覆盖？没用——它连被“覆盖”的机会都没有
同源时能改样式，但必须手动注入到 iframe 内部 document
同源（协议+域名+端口完全一致）只是解除了 JavaScript 访问限制，不等于样式自动继承。你得把 CSS 主动塞进 iframe 自己的 或 里。
- 必须监听
load事件，否则iframe.contentDocument可能为null或未就绪 - 推荐用
textContent赋值 style 内容，避免innerHTML引入 XSS 风险（即使同源也建议） - 插到
head更稳妥；若 iframe 内部已有样式表且权重高，可考虑插到body开头或末尾 - 示例：
const iframe = document.getElementById('my-iframe'); iframe.addEventListener('load', () => { const doc = iframe.contentDocument; const style = doc.createElement('style'); style.textContent = '.btn { background: #007bff !important; }'; doc.head.appendChild(style); });
跨源 iframe 根本无法访问 contentDocument，postMessage 是唯一通信路径
一旦 iframe src 是不同源地址（比如 https://thirdparty.com/widget），iframe.contentDocument 和 iframe.contentWindow.document 都会触发 SecurityError: Blocked a frame from accessing a cross-origin frame。
- CORS 对 iframe DOM 访问完全无效——这是常见误解
- 想让跨源 iframe 改样式，必须由它自己监听
postMessage，收到指令后在内部执行document.styleSheets操作或动态插入<style></style> - 主页面只能发消息：
iframe.contentWindow.postMessage({ type: 'SET_THEME', theme: 'dark' }, 'https://thirdparty.com') - 对方页面必须有对应监听逻辑，否则消息石沉大海
容易被忽略的关键点：HTML 结构错误会让注入的 CSS 白费力气
就算你成功注入了 .event { width: 20%; display: inline-table; }，如果 iframe 里的 HTML 本身不合法（比如 <tr> 直接放在 <code><tbody> 外、缺少 <code><td> 包裹），浏览器会自动纠错并破坏 DOM 结构——这时选择器根本找不到目标节点，样式自然不生效。
<ul>
<li>务必先检查 iframe 内部 HTML 是否符合规范，可用 DevTools 的 Elements 面板直接查看渲染后的结构</li>
<li>同源场景下，可在注入 CSS 前用 JS 先修复结构（如补全缺失的 <code><td>）
<li>跨源时无法干预 HTML 结构，只能依赖对方页面本身写法正确</li>
</td>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
