VTT文件不支持CSS选择器，仅通过cue settings（如line、align）定义基础样式；真正样式控制需用CSS伪元素::cue等配合HTML5视频使用。
VTT 文件本身不支持 CSS 选择器，它是一种纯文本格式，用于定义时间轴上的字幕内容和基础样式（如位置、对齐、字体大小等），但不包含选择器机制。HTML5 视频中字幕的样式控制，实际是通过 CSS 针对 <video> 元素内部的伪元素进行的，而非 VTT 文件内写选择器。
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 内容本身
