如何通过选择器调整HTML5 Vtt字幕文件的样式设置？

本文共计941个文字，预计阅读时间需要4分钟。

VTT 文件不支持 CSS 和选择器。

VTT 是一种纯文本格式，用于定义时间轴上的字幕内容及其基础样式（如位置、对齐、字体大小等）。它是 HTML5 视频字幕的标准格式，但不包含 CSS 和选择器机制。

在 HTML5 视频中，字幕的样式控制通常通过 CSS 实现，针对 `<video>` 元素或其子元素进行样式设置。

VTT 文件能写的“样式”只有内联提示（cue settings）

VTT 文件中每条字幕（cue）末尾可添加空格分隔的提示（settings），例如：

00:00:01.000 --> 00:00:04.000 line:80% align:end position:90% size:40%
你好，欢迎观看

这些提示对应的是 WebVTT 规范定义的有限属性，浏览器会将其映射为内部样式逻辑，但不是 CSS 类或 ID，也无法用 .class 或 #id 选中。支持的常见提示包括：

• line：字幕行在视频垂直方向的位置（数值、百分比或 top/middle/bottom）
• align：水平对齐（left/center/right/start/end）
• position：字幕容器水平偏移（百分比）
• size：字幕容器宽度（百分比）
• vertical：竖排字幕（rl 或 lr）

真正控制字幕样式的 CSS 伪元素选择器

HTML5 视频字幕由浏览器自动渲染为 <track> 关联的内置字幕层，该层不可见 DOM 节点，但可通过一组标准伪元素在 CSS 中定位并样式化：

立即学习“前端免费学习笔记（深入）”；

• ::cue —— 选中所有字幕行（最常用）
• ::cue-region —— 选中整个字幕区域（如多行叠加时的背景容器）
• ::cue(<em>selector</em>) —— 可配合 VTT 中的 class 提示使用（需 VTT 内标注，见下文）

例如，在 CSS 中：

video::cue {
  color: white;
  text-shadow: 2px 2px 4px black;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 1.2rem;
}

VTT 中使用 class 提示实现“类选择”效果

虽然 VTT 不支持选择器，但可以借助 class 提示 + ::cue(.xxx) 实现按类别定制样式：

VTT 文件中写法：

00:00:02.000 --> 00:00:05.000 class:dialog
这是对话字幕 00:00:06.000 --> 00:00:09.000 class:narration
（画外音）

对应 CSS：

video::cue(.dialog) { color: #4a90e2; font-weight: bold; }
video::cue(.narration) { color: #7f8c8d; font-style: italic; }

注意：class 是合法的 WebVTT 提示，必须紧跟在时间轴后、字幕正文前，且中间用空格分隔；浏览器会将其转化为 cue 的内部 class 属性，供 ::cue(.xxx) 匹配。

兼容性与注意事项

• ::cue 在 Chrome、Edge、Safari（macOS/iOS）中支持良好；Firefox 支持有限（仅部分属性，且需启用 media.webvtt.enabled）
• VTT 文件必须以 UTF-8 编码保存，首行建议加 WEBVTT 标识头
• 不能在 VTT 中写 <span class="xxx"> 等 HTML 标签 —— VTT 不解析 HTML，只支持纯文本 + 提示
• 动态修改字幕样式只能靠 JS 操作 CSSOM（如修改 document.styleSheets），不能操作 VTT 内容本身