iframe内部样式完全不受父页面css影响。这是浏览器的安全隔离机制，父页的style、link或内联样式均不穿透；iframe必须自行引入css，且父页无法用css选择器控制其内容，仅能设置iframe元素自身样式。
iframe 内部样式是否受父页面 CSS 影响？
完全不受影响。iframe 创建了一个独立的 document 和渲染上下文，父页面的 <style></style>、<link rel="stylesheet"> 或内联 style 属性，**不会穿透到 iframe 内部**。这是浏览器默认的安全隔离机制，不是 bug，是预期行为。
如何让 iframe 正确加载自己的 CSS？
必须在 iframe 的 HTML 文档内部显式引入样式 —— 不能依赖父页注入。常见方式有三种：
- 在 iframe 源 HTML 文件中写
<link rel="stylesheet" href="/css/main.css"> - 用 JavaScript 动态插入（需确保操作的是 iframe 的
contentDocument）：const iframe = document.getElementById('myIframe'); const doc = iframe.contentDocument || iframe.contentWindow?.document; const link = doc.createElement('link'); link.rel = 'stylesheet'; link.href = '/css/theme.css'; doc.head.appendChild(link); - 内联
<style></style>标签（适合简单覆盖或调试）：const style = doc.createElement('style'); style.textContent = 'body { margin: 0; font-family: sans-serif; }'; doc.head.appendChild(style);
注意：iframe.contentDocument 在跨域时会抛出 SecurityError，此时上述 JS 方式不可用 —— 必须由 iframe 自身 HTML 控制样式加载。
父页面能否用 CSS 选择器控制 iframe 内容？
不能。CSS 作用域天然不跨越 iframe 边界。下面这些写法都无效：
立即学习“前端免费学习笔记（深入）”；
/* ❌ 父页面中这样写毫无效果 */
iframe .button { color: red; }
#myIframe body { background: #f0f0f0; }
iframe::before { content: "nope"; }唯一能用 CSS 影响 iframe 的，仅限于 iframe 元素自身的样式（如边框、宽高、阴影等）：
/* ✅ 有效：只作用于 iframe 这个 HTML 元素本身 */
iframe {
border: 1px solid #ccc;
width: 100%;
height: 400px;
}跨域 iframe 的样式隔离更严格，但同源下能通信吗？
同源 iframe 可通过 contentWindow 访问其 DOM 并动态改样式，但依然要遵守 DOM 操作规则：
- 必须等 iframe 加载完成再操作：
iframe.addEventListener('load', handler) - 修改样式应优先操作
contentDocument的或元素style属性，而非试图重写父页 CSS 规则 - 避免直接修改 iframe 内第三方脚本生成的元素样式 —— 它们可能被后续 JS 覆盖或重建
跨域 iframe 下，连 contentDocument 都不可读，此时样式完全由其自身 HTML 决定，父页只能靠 URL 参数、postMessage 通知其切换预置主题类名（如 document.body.classList.add('dark')），但前提是 iframe 主动实现了该逻辑。
最容易被忽略的一点：开发时本地用 file:// 协议打开含 iframe 的页面，即使两个 HTML 文件在同一目录，也会因协议不同被判定为跨域 —— 导致样式无法注入、DOM 无法访问。务必用本地服务（如 python -m http.server）启动测试。
