:focus-within在edge 18及更早版本中完全未实现，必须用javascript模拟：监听focusin/focusout事件，通过settimeout延迟判断document.activeelement是否仍在容器内，动态添加/移除focus-within类，并在css中同时定义:focus-within和.focus-within规则。
旧版Edge（≤18）不支持:focus-within怎么办
直接说结论：:focus-within 在 Edge 18 及更早版本中完全不生效，不是兼容性问题，是根本没实现。不能靠加前缀或调整写法绕过，必须降级处理。
最稳妥的模拟方式是用 JavaScript 监听 focus 和 blur 事件，在父容器上动态添加/移除一个类名（比如 focus-within），再用 CSS 基于该类名复现样式逻辑。
监听 focus/blur 时要注意事件冒泡和焦点穿透
原生 :focus-within 会响应子元素获得焦点（包括 input、button、contenteditable 等可聚焦元素），也支持嵌套容器内的深层子元素。JS 模拟必须覆盖这些情况，但不能误判。
- 用事件委托监听父容器的
focusin（冒泡版focus）和focusout（冒泡版blur），避免为每个子元素单独绑定 - 检查
event.target是否是可聚焦元素（tabIndex >= 0或匹配input, button, select, textarea, [contenteditable]等） - 注意
focusout触发时机：它在焦点离开当前元素时立即触发，但此时新焦点可能还没落在目标上，需用setTimeout延迟判断是否真的失焦
用 classList 切换 focus-within 类的典型写法
以下是一个轻量、无依赖的实现片段，适用于单个容器或批量初始化：
function setupFocusWithin(container) {
const handleFocusIn = () => container.classList.add('focus-within');
const handleFocusOut = () => {
setTimeout(() => {
if (!container.matches(':focus-within') && !container.contains(document.activeElement)) {
container.classList.remove('focus-within');
}
}, 0);
};
container.addEventListener('focusin', handleFocusIn);
container.addEventListener('focusout', handleFocusOut);
}
// 使用示例
setupFocusWithin(document.querySelector('.dropdown'));
关键点：
- 不依赖
:focus-within检测（因为旧 Edge 不支持），改用document.activeElement+contains()判断焦点是否还在容器内 -
setTimeout(..., 0)是必须的——否则focusout触发时activeElement还可能是null或旧值 - 如果页面有多个同类容器，用
querySelectorAll遍历调用即可，无需框架
CSS 里同时写原生和 JS 模拟规则更安全
不要删掉原来的 :focus-within 规则，而是叠加类名规则，让新旧浏览器自动走各自路径：
.dropdown:focus-within .menu,
.dropdown.focus-within .menu {
opacity: 1;
visibility: visible;
}
这样写的好处：
- 现代浏览器走原生伪类，性能更好、无 JS 依赖
- 旧版 Edge 走
.focus-within类，行为一致 - 避免维护两套独立样式，降低出错概率
- 如果未来某天彻底放弃旧 Edge，只需删掉
.focus-within类相关行，CSS 无残留
真正容易被忽略的是 focusout 的异步清理逻辑——少一个 setTimeout，就可能导致类名残留，菜单关不掉。别图省事写同步判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
