iframe内元素无法触发父页面:focus伪类，根本原因是css作用域隔离及同源策略限制；跨域时只能由子页面自定义样式或通过postmessage通信控制高亮。
iframe 内部元素无法触发 :focus 伪类
根本原因是 iframe 默认启用 sandbox 属性（或受同源策略限制），导致父页面无法直接干预子页面焦点逻辑；即使子页面元素获得焦点，父文档的 CSS 选择器也无法穿透 iframe 边界匹配到子页面中的 :focus 状态。
父页面用 JavaScript 主动聚焦 iframe 内元素
必须确保 iframe 已加载完成、且目标元素可聚焦（tabindex ≥ 0 或原生可焦元素如 <input>、<button></button>）：
- 监听
iframe.onload或使用iframe.contentDocument?.readyState === 'complete' - 通过
iframe.contentWindow?.document.querySelector('input')获取目标元素 - 调用
.focus()—— 注意：若 iframe 跨域，这一步会抛出DOMException: Blocked a frame with origin ... from accessing a cross-origin frame
跨域 iframe 下无法用 CSS 控制子页面 :focus 样式
这是浏览器安全模型强制限制，不存在绕过方案。可行替代路径只有两种：
- 子页面自己定义
:focus样式（最可靠） - 父页面通过
postMessage通知子页面“你该高亮了”，子页面监听后手动添加 class（例如.focused-by-parent）并用 CSS 驱动样式
注意：子页面需显式检查 event.origin 并验证消息来源，避免 XSS 风险。
立即学习“前端免费学习笔记（深入）”；
同源 iframe 中父页面 CSS 仍不能选中子页面元素
CSS 作用域天然隔离，iframe 是独立渲染上下文。即便同源，父页面写 iframe input:focus 也完全无效——这不是 bug，是规范行为。
真正能生效的方式只有：
- 在子页面内部写 CSS（如
input:focus { outline: 2px solid blue; }） - 父页面注入 style 标签到子页面 DOM（需同源）：
iframe.contentDocument.head.appendChild(styleEl) - 用 JS 在子页面中动态设置
element.style.outline（适合临时高亮）
别试图用父页面 CSS 选中 iframe 里的东西，这条路从底层就被堵死了。
