CSS无法单独控制video元素不同字幕轨道的样式，唯一可用的是::cue伪元素；若需差异化样式，须用JavaScript监听textTracks变化并动态设置data属性，再结合属性选择器实现。
video元素的字幕轨道怎么用CSS单独控制样式
浏览器原生字幕（track 元素加载的 WebVTT）无法直接用类名或ID选中，也不能用 :nth-child() 精准定位某条轨道——因为渲染出的字幕文本由浏览器内部生成，不暴露在 DOM 中。真正能干预样式的，只有 ::cue 伪元素及其变体。
::cue 伪元素的实际作用范围和限制
::cue 匹配所有激活字幕轨道中显示的每一条字幕行，但不区分轨道来源。也就是说，如果你同时启用两条 track（比如中英双语），::cue 会一并作用于两者，无法单独给“英文轨道”加粗、“中文轨道”改颜色。
-
::cue是唯一被主流浏览器（Chrome/Firefox/Safari）稳定支持的字幕样式入口 -
::cue-region可以控制字幕区域整体位置/背景，但兼容性差（Safari 不支持） - 不能用
::cue(.class)—— WebVTT 中的 class 注释（00:00:01.000 --> 00:00:04.000 class:dialog）在 Chrome 和 Firefox 中均被忽略，::cue(.dialog)无效 - 不能通过
track的kind、srclang或label属性做 CSS 分离
想让不同轨道有不同样式？只能靠 JS + 动态切换
浏览器不提供基于轨道元信息的 CSS 钩子，所以“选中特定轨道”这件事，CSS 本身做不到。可行路径是：用 JavaScript 监听 textTrackCueList 变化，手动给当前活跃轨道打标记，再结合自定义属性驱动样式。
- 监听
video.textTracks的onchange，判断哪条track的mode === 'showing' - 给
<video></video>元素设置 data 属性，例如：video.dataset.activeTrack = 'zh' - 在 CSS 中写：
video[data-active-track='zh']::cue { color: #333; }和video[data-active-track='en']::cue { color: #666; font-style: italic; } - 注意：Safari 对
::cue的属性支持最窄（不支持text-shadow、transform等），优先测试color、font-size、background
常见错误现象和调试建议
写完 ::cue 样式却没生效？大概率卡在这几个点上：
立即学习“前端免费学习笔记（深入）”；
- 忘记给
track设置default属性，或用户手动关闭了字幕——::cue只对mode === 'showing'的轨道起作用 - 用了
::cue { opacity: 0.8; }，但发现整个字幕块透明了——这是因为::cue匹配的是每条 cue 的容器，不是单个词；如需更细粒度，得靠 WebVTT 内联 HTML（不推荐，兼容性极差） - CSS 优先级不够：外部样式表中的
::cue可能被浏览器默认样式覆盖，建议加!important（虽然不优雅，但目前最稳） - 在 Shadow DOM 中使用 video（比如封装成自定义组件），
::cue必须写在全局样式里，不能放在<style></style>标签内作用域中
真正难的不是写对语法，而是接受「CSS 没法按轨道区分」这个事实。所有绕过它的方案，本质都是用 JS 把轨道状态映射成可 CSS 响应的信号——这点容易被忽略，直到你在 Safari 里调了两小时才发现样式根本没进渲染树。
