::cue

::cue CSS 伪元素 匹配选定元素内的 WebVTT 提示。这可以用于设置媒体中带有 VTT 轨道的字幕和其他提示的样式。

试一试

属性应用于整个提示集，就好像它们是一个单元一样。唯一的例外是 background 及其详细属性分别应用于每个提示，以避免创建盒子并意外遮挡媒体的大面积区域。

在上面的示例中，::cue(u) 选择器选择 提示文本 内的所有 <u> 元素。

语法

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

允许的属性

选择器包含此元素的规则只能使用以下 CSS 属性

示例

将 WebVTT 提示样式设置为白底黑字

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

css
::cue {
  color: #fff;
  background-color: rgb(0 0 0 / 60%);
}

设置 WebVTT 内部节点对象的样式

提示文本可以包含内部节点对象作为标签（类似于 HTML 元素）<c>、<i>、<b>、<u>、<ruby>、<rt>、<v> 和 <lang>。::cue() 选择器可用于将样式应用于这些标签内的内容，以自定义 WebVTT 轨道的显示方式。考虑以下使用 <u> 标签为某些文本添加下划线的提示文本

00:00:01.500 --> 00:00:02.999 line:80%
Tell me, is the <u>lord of the universe</u> in?

以下 CSS 规则使用颜色和 文本装饰 自定义 <u> 标签内的文本

css
::cue(u) {
  color: red;
  text-decoration: wavy overline lime;
}

规范

规范
WebVTT：Web 视频文本轨道格式
# the-cue-pseudo-element

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅