:popover-open伪类生效需满足四前提：元素带popover属性（值为无值或"manual"）、DOM就绪、已打开状态、显式设[popover]{display:none}。失效主因包括属性缺失、动态插入、ID错误及z-index不足。
:popover-open 伪类生效的前提条件
它不是“写了就管用”的样式开关，而是浏览器对 popover 实例状态的快照。只有元素被识别为 popover、且当前处于打开状态，:popover-open 才会匹配成功。
常见失效原因包括：
-
popover属性没加在目标元素上（比如加在 button 上，而不是<div id="menu" popover>） - 用了
popover="true"或popover="auto"—— 必须是popover（无值）或popover="manual"，"auto"在部分 Chromium 版本中已被弃用 - 目标元素是 JS 动态插入的（
innerHTML或appendChild），Safari 17.4+ 和部分 Chromium 会拒绝将其纳入 popover 系统 - ID 引用错误：若用
popovertarget="menu"，对应元素必须有id="menu"，大小写、空格、中文全都不行
[popover]:popover-open 比 div:popover-open 更可靠
推荐始终使用属性选择器写法：[popover]:popover-open，而不是限定标签名的 div:popover-open。
原因很实际：
立即学习“前端免费学习笔记（深入）”；
- 语义升级时更安全——将来你换成
<section popover>或<aside popover>，[popover]依然生效，div:popover-open直接失效 - 初始隐藏策略依赖它：
[popover] { display: none; }是必须的，否则未打开时也占布局流，页面会跳动 - 避免误匹配：有些框架或组件库可能在非 popover 元素上加了
popover类名，但属性选择器只认真实的popover属性
display: none 初始隐藏是硬性要求
不加 [popover] { display: none; }，:popover-open 样式即使生效，视觉上也可能看不出变化——因为元素本来就在页面上占位。
典型错误写法：
[popover]:popover-open {
display: block;
border: 2px solid #007aff;
}正确写法必须包含默认隐藏：
[popover] {
display: none;
}
[popover]:popover-open {
display: block;
border: 2px solid #007aff;
background: white;
padding: 12px;
}注意：原生 popover 默认 display 是 none，但这是 UA 样式，不能依赖；显式声明才能确保行为一致。
z-index 不够高会导致样式“生效但不可见”
你看到 :popover-open 匹配成功（DevTools 里样式亮起），但弹出层被盖住——大概率是层叠上下文问题。
原生 popover 默认 z-index 很低，容易被以下元素遮挡：
-
<select>（尤其在 macOS Safari 中） -
<video>、<iframe>（它们自带强层叠上下文） - 父容器设置了
transform、opacity < 1或will-change，意外创建新层叠上下文
解决方法很简单：
[popover]:popover-open {
z-index: 1000;
position: relative; /* 确保 z-index 生效 */
}如果仍被盖住，检查是否触发了 ::backdrop 的层叠干扰——::backdrop 默认 z-index 是 -1，但某些 UA 可能调整过，必要时可显式设为 z-index: 999 并配合 background-color 调试。
真正麻烦的不是怎么写 :popover-open，而是它背后那一整套 popover 实例生命周期：DOM 就绪、属性存在、JS 调用、浏览器支持判断，缺一环就白写。很多人卡在“样式写了但没反应”，其实根本还没走到伪类匹配那一步。
