CSS 伪元素

CSS 中的 ::cue 伪元素用于设置带有视频文本轨道的媒体中的标题和  (WebVTT) 提示的样式。

  • 这些属性将应用于整个媒体提示集。

  • 只有背景及其普通属性分别应用于每个提示。

以下 CSS属性只能由任何选择器上的 ::cue 伪元素使用:

  • background
  • background-attachment
  • background-color
  • background-clip
  • background-image
  • background-origin
  • background-position
  • background-repeat
  • background-size
  • color
  • font
  • font-family
  • font-size
  • font-stretch
  • font-style
  • font-variant
  • font-weight
  • line-height
  • opacity
  • outline
  • outline-color
  • outline-style
  • outline-width
  • ruby-position
  • text-combine-upright
  • text-decoration
  • text-decoration-color
  • text-decoration-line
  • text-decoration-style
  • text-decoration-thickness
  • text-shadow
  • visibility
  • white-space

语法

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

CSS ::cue 示例

这里是一个显示 ::cue 伪元素用法的示例:

<html>
<head>
<style>
    video {
        width: 800px;
    }

    video::cue {
        font-size: 1rem;
        color: peachpuff;
    }
</style>
</head>
<body>
    <video controls src="/css/oceans.mp4">
        <track default kind="captions" srclang="en" src="cue-sample.vtt" />
    </video>    
</body>
</html>