HTML5字幕样式必须用::cue伪元素，写在内且位于前；仅支持简单选择器，可响应暗色模式、优化字体渲染，但无法控制位置/行样式/交互，复杂需求需自定义DOM层。
HTML5 中 <track></track> 字幕的样式不能通过普通 CSS 选择器直接控制，必须使用 ::cue 伪元素（及其变体），这是唯一被浏览器原生支持的字幕样式入口。它不是“可选技巧”，而是强制路径——所有其他方式（比如给 <track></track> 加 class、用普通 div 模拟字幕）都会失去语义、可访问性与原生同步能力。
字幕样式必须用 ::cue，且写法有严格限制
::cue 是 CSS 伪元素，专为 <track kind="subtitles"></track> 或 "captions" 设计，作用于字幕文本本身。关键规则：
- 必须在
<style></style>标签内声明（不能放在外部 CSS 文件中，多数浏览器会忽略） - 必须写在
<video></video>元素之前，或至少在<track></track>标签被解析前生效 - 不支持复杂选择器（如
::cue span、::cue:first-child均无效），只能用::cue或带简单属性的::cue(:user-invalid)（极少用）
示例写法（正确且跨浏览器兼容）：
<style>
video::cue {
color: #fff;
background-color: rgba(0, 0, 0, 0.7);
font-size: 1.2rem;
font-family: "Helvetica Neue", sans-serif;
text-align: center;
line-height: 1.4;
padding: 0.3em 0.6em;
}
</style>
<video controls>
<source src="movie.mp4" type="video/mp4">
<track kind="subtitles" srclang="zh" label="中文" src="sub.vtt" default>
</video>深度定制需分场景处理暗色模式与字体渲染
字幕常在暗色背景上显示不清晰，或在高分辨率屏上文字发虚。这时不能只改颜色，要结合系统偏好和渲染优化：
立即学习“前端免费学习笔记（深入）”；
-
响应暗色模式：用
@media (prefers-color-scheme: dark)覆盖::cue样式，避免硬编码颜色@media (prefers-color-scheme: dark) { video::cue { color: #e0e0e0; background-color: rgba(30, 30, 30, 0.85); text-shadow: 0 0 4px rgba(0, 0, 0, 0.9); } } -
提升字体清晰度：添加
-webkit-font-smoothing: antialiased和text-rendering: optimizeLegibility，尤其对 macOS/Safari 有效video::cue { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } -
控制边框与阴影：
::cue支持text-shadow，但不支持border或outline；可用多层text-shadow模拟描边效果video::cue { text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
注意兼容性边界：哪些不能做
::cue 的能力有限，以下操作无法实现，需提前规避预期：
- 无法修改字幕容器高度/位置（如把字幕从底部移到顶部）
- 无法单独设置每行字幕的样式（不支持
::cue-line等扩展，仅 Chromium 实验性支持且未标准化） - 无法响应鼠标悬停或点击（
::cue:hover无效） - 无法用 Flex/Grid 布局字幕内容（
::cue内部不支持块级布局）
如果业务强依赖这些能力（比如弹幕式字幕、点击跳转时间点），就必须放弃 <track></track>，改用 JavaScript + 自定义 DOM 字幕层，但这会牺牲语义化与无障碍支持。
不复杂但容易忽略
