link标签写在iframe的html里只影响该iframe内部渲染；iframe是独立浏览上下文，拥有自己的head、资源队列、cssom和dom，主页面link对其无效，反之亦然。
link标签写在iframe的HTML里，只影响该iframe内部渲染
iframe 是独立的浏览上下文，它加载的 HTML 文档拥有自己的 、自己的资源加载队列、自己的 CSSOM 和 DOM。你在主页面的 里写的 <link>，对 iframe 内容完全无效；反过来，iframe 页面里写的 <link rel="stylesheet">，也只作用于 iframe 自身内容，不会污染主页面样式。
常见错误现象：
- 主页面加了
<link rel="stylesheet" href="main.css">，但 iframe 里的按钮没变样式 —— 因为 iframe 没加载这份 CSS - 在 iframe 的 HTML 文件里漏写了
rel="stylesheet"，结果样式白屏，控制台却无报错 - 用 JS 动态往 iframe 的
document.head插入<link>，但没等 iframeload完就操作，导致插入失败或被忽略
iframe内嵌HTML中link标签必须满足常规约束
iframe 加载的 HTML 文档，其内部的 <link> 标签仍需遵守所有标准规则：必须在 中、rel 值必须准确、href 路径以该 iframe HTML 文件位置为基准。
实操建议：
-
<link rel="stylesheet" href="style.css">放在 iframe 所加载 HTML 的内 —— 放在会导致 FOUC，且旧版 IE 直接忽略 - 路径优先用根相对路径：
href="/css/iframe-theme.css"，避免因 iframe HTML 文件部署在不同子目录（如/admin/frame.html）导致 404 - 若 iframe 页面跨域（如
src="https://thirdparty.com/widget.html"），你无法控制其内部<link>，也无法通过 JS 注入 —— 浏览器会拒绝访问其contentDocument - 不要指望主页面的
<link rel="preload">能预加载 iframe 里的资源 —— 预加载范围仅限当前文档上下文
想让主页面和iframe共享样式？别依赖link标签自动透传
link 标签不具备跨上下文能力。所谓“共享样式”，实际只有三种可行路径，且各有硬限制：
- 主页面通过
document.styleSheets读取自身 CSS 规则，再用 JS 注入到同源 iframe 的head—— 仅限同源，且需确保 iframe 已load完成 - 把公共 CSS 提取为 CDN 地址，主页面和 iframe HTML 各自写一份
<link rel="stylesheet" href="https://cdn.example.com/shared.css">—— 最简单，但要注意缓存一致性 - 用 CSS-in-JS 或构建时提取 design tokens，生成两份独立但语义一致的样式表 —— 适合微前端或强隔离场景
容易被忽略的一点：即使主页面和 iframe 都加载了同一份 CSS，若选择器权重或层叠顺序不同（比如 iframe 里多了一层 <div class="wrapper">），样式表现仍可能不一致 —— link 标签只管加载，不管应用效果。</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
