::cue (:cue)

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

::cue CSS 伪元素匹配所选元素中的WebVTT提示。这可以用于在 VTT 轨道的媒体中使用字幕和其他线索。

只有 CSS 一小部分属性可以与 ::cue 伪元素一起使用：

属性应用于整个提示集，就像它们是单个单元一样。唯一的例外是背景及其简写属性可以单独应用于每个提示，以避免创建框并遮盖意外大面积的媒体。

语法

css
::cue | ::cue(<selector>) {
  /* ... */
}

示例

以下 CSS 设置提示样式，使文本为白色，背景为半透明黑盒。

css
::cue {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
}

规范

Specification
WebVTT: The Web Video Text Tracks Format
# the-cue-pseudo-element

浏览器兼容性

BCD tables only load in the browser

参考