video::cue 样式不生效的主因是 track 未就绪，需确保 kind 为 subtitles/captions、readyState===2、track 在 video 内、VTT 首行为纯 WEBVTT、Content-Type 正确、无 CORS 问题，且 iOS Safari 要求 srclang 严格匹配系统语言。
video::cue 样式不生效，先查 track 是否真正就绪
90% 的“写了没反应”问题，根源不是 CSS 写错，而是 track 根本没被浏览器当作有效字幕轨道加载。只有 kind="subtitles" 或 kind="captions" 且 readyState === 2 时，::cue 才会触发。
必须检查以下几点：
-
<track>必须写在<video>标签内部，不能用 JS 动态插入后指望样式立刻生效 - VTT 文件首行必须是纯文本
WEBVTT（无 BOM、无空格、无注释） - Network 面板确认请求返回
200，响应头Content-Type为text/vtt，且未被 CORS 拦截 - iOS Safari 会静默禁用
srclang与系统语言不匹配的轨道——即使你写了video::cue，它也根本没渲染
哪些 CSS 属性在 ::cue 上真正可用
::cue 不是普通 DOM 元素，它是浏览器合成层里的“影子文本”，所有样式都作用于整条 cue 块，无法选中单个词或控制换行逻辑。
✅ 跨浏览器稳定支持的属性（Chrome ≥ 115 / Firefox ≥ 119 / Safari ≥ 16.4）：
立即学习“前端免费学习笔记（深入）”；
-
color、background-color（background: linear-gradient()在 Safari 中被忽略） -
font-size（推荐用em或rem，固定px在小屏易溢出） -
font-family（中文字体建议 fallback 到"PingFang SC","Microsoft YaHei",sans-serif） -
text-shadow（如1px 1px 2px black，比纯背景更兼容；旧版 Firefox 不支持，需降级为color + background-color） -
padding（避免设过大值，多行字幕会被截断） -
text-align、line-height、white-space（但换行仍由 VTT 文件中的\n和line:指令控制）
❌ 明确无效的属性（写了也白写）：
-
display（block/inline全部被忽略） -
margin、border、position、transform、filter、box-shadow - 后代选择器（如
video::cue b或video::cue > span） -
::cue(::first-line)（仅 Firefox 支持）
如何用 class 或标签做局部样式控制
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) - 内联标签有效：
<b>重点</b>→video::cue(b) { font-weight: bold; } -
<b class="highlight">中的class不会被保留，video::cue(.highlight)不匹配 - 类名选择器在 iOS Safari 中至今不支持（截至 2026 年 9 月）
容易被忽略的兼容性细节
看似简单的 video::cue，实际在跨浏览器落地时有多个隐性门槛：
- Chrome 115+、Firefox 119+ 才支持
::cue(.class)；旧版本只能用全局video::cue - iOS Safari 对
srclang极其敏感——哪怕只是大小写不一致（如en-usvsen-US），也会静默禁用轨道 -
text-shadow在 Safari 中渲染偏淡，建议叠加background-color做 fallback - 多行字幕的
padding和line-height组合极易导致截断，实测建议上限为padding: 0.3em、line-height: 1.4
