video::cue样式生效前提是track轨道加载成功且readyState为2；需确保track在video内、VTT格式正确、MIME类型为text/vtt、kind为subtitles或captions，并仅支持color、font-size等有限样式属性。
HTML5 中用 <track> 标签配合 CSS 美化字幕，核心不是“写对样式”，而是先让字幕轨道被浏览器真正识别并加载成功——90% 的样式失效问题，根源在轨道没就绪，而非 CSS 写错。
确保 track 轨道正确加载是前提
浏览器只对 readyState === 2（即已加载完成）且 kind="subtitles" 或 "captions" 的轨道应用 ::cue 样式。必须检查以下几点：
-
<track>必须作为<video>的直接子元素，且放在所有<source>之后、</video>之前；不能靠 JS 动态插入后再期待样式立即生效 - VTT 文件首行必须是顶格、全大写、无空格、无 BOM 的
WEBVTT，后面跟一个空行 - 文件编码为 UTF-8 无 BOM（尤其中文/日文/阿拉伯文等，记事本默认带 BOM，务必用 VS Code 或 Notepad++ 保存为“UTF-8 无签名”）
- Network 面板确认 .vtt 请求返回 200，响应头中
Content-Type: text/vtt，且未被 CORS 拦截 -
srclang值需符合 ISO 639-1（如zh、en），Safari 会据此匹配系统语言，不匹配可能自动禁用轨道
用 video::cue 写有效样式
::cue 是专用于字幕文本块的伪元素，但它支持的属性非常有限，且所有样式作用于整条字幕（无法选中单个词）：
- ✅ 可用：
color、background-color、font-family、font-size（推荐用em或rem）、text-shadow（比 background 更兼容）、text-align、padding、opacity - ❌ 无效：
display、margin、border、position、transform、box-shadow、后代选择器（如::cue b） - ⚠️ 注意差异：
background: linear-gradient()在 Safari 中不生效；::cue(::first-line)仅 Firefox 支持；line-height和white-space渲染不稳定，换行仍由 VTT 文件中的\n控制
按类名或标签做局部样式控制
VTT 文件里可添加 class 提示或简单 HTML 标签，再通过 ::cue(. 类名) 实现局部效果，但需注意兼容性：
立即学习“前端免费学习笔记（深入）”；
- VTT 中写法（注意空格分隔）：
00:00:01.000 --> 00:00:03.000 class:warning 后接字幕正文 - CSS 对应：
video::cue(.warning) { color: #e74c3c; font-weight: bold; } - 支持多类：
class:warning big-text→video::cue(.warning, .big-text) - VTT 中写
<b>重点</b>不会被渲染为加粗，只是原样显示；如需强调，靠 class + CSS 控制更可靠
多语言字幕切换与样式统一
多个 <track> 共存时，CSS 的 video::cue 规则会统一作用于所有已启用的字幕轨道，无需为每种语言单独写样式：
- 只需一套
video::cue规则，就能覆盖中文、英文、日文等所有kind="subtitles"轨道 - 用户手动切换语言后，样式自动沿用；若某语言文字偏小或偏大，可用
font-size配合srclang做微调（如video:lang(zh)::cue，但支持度有限，建议优先用通用设置） - 确保所有 VTT 文件格式一致（同为 UTF-8 无 BOM、WEBVTT 开头、时间戳规范），避免部分语言字幕因解析失败而样式完全不触发
