:popover-open

CSS :popover-open 伪类是弹出窗口 API 的一部分，用于选择 popover 元素，并在其处于“打开”状态时设置弹出窗口的样式。

/* Select any open popover */
:popover-open {
  /* Styles */
}

/* Select a specific popover */
#toggletip:popover-open {
  /* Styles */
}

一些上下文

弹出窗口 API — 在最基本层面上 — 允许我们将页面上的任何元素定义为“弹出窗口”，即通过单击另一个“目标”元素（例如，<button>（或 <input> 风格的按钮））来切换其可见性的元素。

<button popovertarget=“wave”>Say Hello</button>
<div popover id=“wave”>👋</div>

popover 元素默认情况下为 display: hidden，即其“关闭”状态。 当我们单击按钮时，popover 将以其“打开”状态弹出。

我们正在用 :popover-open 伪类讨论的正是打开状态。 它允许我们选择 popover 并仅在它处于打开状态时对其应用样式，优先于默认样式。

默认样式

您是否注意到在最后一个示例中，popover 在打开时完美地居中于页面？ 我们甚至没有在那里编写任何 CSS！

与许多选择器一样，浏览器会对 [popover] 属性应用“默认”样式。 我们可以在 Chrome 开发者工具中看到它们。

[popover] {
  position: fixed;
  width: fit-content;
  height: fit-content;
  color: canvastext;
  background-color: canvas;
  inset: 0px;
  margin: auto;
  border-width: initial;
  border-style: solid;
  border-color: initial;
  border-image: initial;
  padding: 0.25em;
  overflow: auto;
}

这就是将 popover 放在页面正中央的原因，如果我们想要将其重新定位到其他位置、更改其尺寸或其他操作，我们必须覆盖它们。 :popover-open 伪元素非常适合覆盖这些样式，因为它只在 popover 处于打开状态时应用样式，优先于默认样式。

:popover-open {
  background-color: hsl(25 100% 50%);
  border: 0;
  color: hsl(300 50% 3% / .85);
  padding: 1.5rem;
  width: 25ch;
}

规范

CSS :popover-open 伪类在 HTML 标准 中定义。

浏览器支持

IE	Chrome	Edge	Firefox	Safari	Opera
否	114	114	125	17	101

Safari iOS	Chrome Android	Firefox Android	Android 浏览器	Opera 移动	三星 互联网
17	125	126	23	80	125

相关