:popover-open伪类不生效的根本原因是目标元素未被浏览器识别为popover实例，它仅在Chromium 114+中完整支持，且必须满足<div popover>声明、DOM就绪、ID引用准确等前提条件。
为什么:popover-open伪类不生效
根本原因只有一个：目标元素压根没进 popover 系统，:popover-open自然无从匹配。它不是“样式开关”，而是“状态快照”——只有元素已被浏览器识别为 popover 实例，且当前处于打开状态，该伪类才可能命中。
常见失效链路如下：
-
[popover]属性缺失或写错：必须是<div popover>，不是popover="true"、popover="manual"，更不能加在按钮上 - DOM 尚未就绪就调用
showPopover()：目标元素必须在页面初始 HTML 中存在，不能靠 JS 动态innerHTML插入后补属性（Safari 17.4+ 明确拒绝） - ID 引用断裂：若用了
popovertarget，其值必须严格等于目标元素的id，大小写敏感、不能含空格或中文 - 浏览器不支持：Firefox 完全无视该伪类；Safari 17.4+ 支持
popover属性但不支持:popover-open伪类；仅 Chromium 114+ 完整支持
[popover]:popover-open 为什么比 div:popover-open 更可靠
因为 [popover] 是属性选择器，只关心“有没有 popover 属性”，不依赖标签名；而 div:popover-open 要求元素既是 <div> 又处于打开状态——一旦你换用 <section popover> 或未来语义化升级，后者立刻失效。
更关键的是，[popover] 能配合 display: none 初始隐藏策略：
立即学习“前端免费学习笔记（深入）”；
-
[popover] { display: none; }—— 确保未激活时不占布局流 -
[popover]:popover-open { display: block; }—— 打开时才参与渲染 - 如果漏掉第一行，元素即使没打开也会撑开空白区域，导致页面跳动
为什么加了 :popover-open 样式却没反应
大概率是 z-index 不够高，或者层叠上下文被意外截断。原生 popover 默认 z-index 值偏低，会被 <select>、<video>、<iframe> 盖住，此时样式虽然匹配成功，但视觉上完全不可见。
必须显式提升层级：
- 给 popover 元素加
z-index: 10000（不能用auto或继承值） - 如果用了
::backdrop，它有自己的层叠上下文，需单独设::backdrop { z-index: 9999; } - 检查 popover 父级是否含
transform、filter或will-change——这些会创建新层叠上下文，把 popover 锁死在局部范围内
替代方案：当 :popover-open 不可用时怎么办
别硬扛兼容性缺口。现阶段真正落地的方案是降级回 <dialog>：
-
<dialog>支持 Safari 15.4+、Firefox 98+、Chrome 37+，showModal()/show()+:modal伪类稳定可用 - 若需非模态弹层，用
position: fixed+ 手动管理aria-hidden和焦点，配合classList.toggle('open')控制显隐 - 所有基于 Popper.js 的方案（如 Bootstrap Popover、Element Plus
el-popover）都提供popper-class或类似钩子，可直接绑定状态类，无需依赖原生伪类
原生 :popover-open 现在仍是实验性功能，它的价值在于语义统一，而不是即插即用。真正在意可访问性和跨浏览器一致性，就得接受它目前只是“未来就绪”的标记，而非生产可用的样式接口。
