旧版 edge（≤15）完全不支持 :focus-within，css 规则被静默忽略，开发者工具中无该伪类选项；edge 16 起才支持，此前需用 focusin/focusout 事件配合 class 模拟，并重写 css 为 class 选择器。
旧版 Edge（≤15）根本不支持 :focus-within
Edge 15 及更早版本对 :focus-within 完全无解析能力，CSS 规则会被浏览器静默忽略——不是“不生效”，而是压根不认识这个语法。开发者工具里连伪类选项都不会出现，:focus-within 选择器直接不被加载。
它和 Chrome 60+/Firefox 52+ 的行为完全不同：那些浏览器要么支持，要么降级为无样式；而旧 Edge 连匹配逻辑都不启动。
- 确认方式：打开旧 Edge → DevTools → Elements 面板 → 右键目标元素 → “Force element state” → 看不到
:focus-within选项 - 兼容性边界很明确：Edge 16 开始支持，15 及之前必须绕过
- 别试图用
@supports (selector(:focus-within))检测——旧 Edge 连@supports里的 selector() 函数都不认
用 focusin/focusout 事件模拟 :focus-within 行为
核心思路是监听父容器的 focusin（冒泡）和 focusout（不冒泡，需委托），手动切换 class：
Knowledge Graph - Csv Graph Loader Generator
下载
从 CSV 数据集生成图数据库加载器和三元组映射。将表格 CSV 数据转换为图数据库可直接使用的节点、边和三元组。
- 只监听父容器，不要给每个子元素单独绑事件，避免内存泄漏
- 用
focusin而非focus，因为后者不冒泡，无法捕获子元素获得焦点的时刻 -
focusout需配合setTimeout延迟判断，防止 blur 后立即 focus 到同级元素导致误判 - 示例代码中，
.form-group是父容器，.js-focus-within是你定义的 fallback class：
const container = document.querySelector('.form-group');
container.addEventListener('focusin', () => {
container.classList.add('js-focus-within');
});
container.addEventListener('focusout', () => {
setTimeout(() => {
if (!container.contains(document.activeElement)) {
container.classList.remove('js-focus-within');
}
});
});
CSS 写法必须同步改用 class 选择器
不能保留 .form-group:focus-within input 这类原生写法，否则旧 Edge 会完全跳过整条规则。所有依赖 :focus-within 的样式都要重写为基于 class：
- 原写法（新浏览器）：
.form-group:focus-within label { color: #007bff; } - fallback 写法（全兼容）：
.form-group.js-focus-within label { color: #007bff; } - 如果项目已用 CSS-in-JS 或 PostCSS，建议用插件自动转换，避免漏改
- 注意：class 名别和现有业务 class 冲突，比如
.focus-within可能已被其他逻辑占用
移动端 Safari 15.4–16.3 的隐藏坑
虽然这不是旧 Edge 的问题，但如果你同时要兼容旧 Edge 和这批 Safari 版本，得额外提防：input[type="search"] 在父容器设了 overflow: hidden 时，:focus-within 会静默失效——即使 Edge 已升级到 16+，这个 bug 仍存在。
- 临时解法：移除父容器的
overflow: hidden，改用clip-path或mask控制裁剪 - 长期解法：对
input[type="search"]单独加tabindex="0"并监听其focus事件，绕过:focus-within链路 - 这个 bug 不影响 JS 模拟方案，所以用
focusin+ class 的方式反而更稳
真正难的不是写几行 polyfill，而是确保所有可聚焦路径都被覆盖——比如自定义组件里的 div[role="button"]、封装过的 Textarea、甚至 Shadow DOM 内的表单控件，它们的 focus 行为可能被框架拦截或重写，JS 模拟时得主动调用 .focus() 并触发 focusin。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
