:popover-open 是实验性css伪类，仅匹配通过showpopover()激活的原生元素，目前仅chromium 114+支持，需配合[popover]:popover-open使用且初始设display:none。
什么是 :popover-open 伪类
:popover-open 是一个实验性 CSS 伪类，用于匹配当前处于“打开状态”的 <popover></popover> 元素（注意：不是 <dialog></dialog>，也不是通过 popover="manual" 声明的旧式 popover）。它只在浏览器原生支持 popover API 且该 popover 确实被 showPopover() 或 showModal() 激活时生效。
关键点：它不作用于 display: popover 的旧写法（已废弃），也不响应 open 属性——popover 元素本身没有 open 属性，这是和 <details></details> 的根本区别。
:popover-open 不生效的常见原因- 用了过时的
popover="auto" 或 popover="manual" 属性：这些属性已被移除，现代 popover 必须用 <div popover>（无值）声明<li>元素未真正调用 <code>showPopover()：仅设置 popover 属性不会触发显示，也不会激活伪类
- 浏览器不支持：截至 2024 年中，仅 Chromium 114+（Chrome/Edge 114+、Opera 100+）稳定支持；Firefox 和 Safari 尚未实现
:popover-open
- 样式写在了错误的选择器层级，比如
div:popover-open span 但 popover 内容是 shadow DOM 或被包裹在其他容器里
正确写法与最小可运行示例
确保 HTML 结构简洁，CSS 直接作用于 popover 元素本身：
<button id="trigger">打开弹出层</button>
<div id="my-popover" popover>这是 popover 内容</div>
<p><style>
/<em> 默认隐藏，避免布局干扰 /
[popover] {
display: none;
}
/<em> 打开时显示并加边框 /
[popover]:popover-open {
display: block;
border: 2px solid #007aff;
background: white;
padding: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
</style></p><p><script>
document.getElementById('trigger').addEventListener('click', () => {
document.getElementById('my-popover').showPopover();
});
</script></p>
popover="auto" 或 popover="manual" 属性：这些属性已被移除，现代 popover 必须用 <div popover>（无值）声明<li>元素未真正调用 <code>showPopover()：仅设置 popover 属性不会触发显示，也不会激活伪类:popover-open
div:popover-open span 但 popover 内容是 shadow DOM 或被包裹在其他容器里正确写法与最小可运行示例
确保 HTML 结构简洁，CSS 直接作用于 popover 元素本身：
注意：[popover]:popover-open 是推荐写法，比 div:popover-open 更健壮，因为它不依赖标签名；display: none 初始隐藏是必须的，否则未激活时也会占用布局空间。
与 JavaScript 状态同步的注意事项
:popover-open 是纯 CSS 响应机制，它不反映 JS 中的临时状态（比如你调用 hidePopover() 后还没完成动画，伪类会立刻失效）。
- 不要依赖它做“动画结束回调”：CSS 过渡在伪类移除后立即开始，但无法监听“从 open → closed”的时机
- 若需精确控制样式过渡，建议配合
popovervisible/popoverhidden事件 + class 切换，例如：element.classList.toggle('is-open', event.type === 'popovervisible') - 多个 popover 同时存在时，
:popover-open只匹配当前顶层显示的那个（modal popover 会阻塞其他，auto popover 则可能共存，但伪类仍只对已 show 的生效）
目前最大的实际限制是兼容性——如果你需要支持 Firefox 或旧版 Chrome，就得回退到基于 class 的方案，:popover-open 还不能当作通用样式基座。
