video::cue 样式不生效的主因是字幕轨道未正确加载或类型不匹配，需确保 track 在 video 内、vtt 文件首行为纯 webvtt、src 可访问且 kind 为 subtitles/captions；仅支持有限文本样式，类名和标签需严格匹配规范。
写了 video::cue 却没反应，大概率不是 CSS 写错了，而是字幕轨道根本没加载成功或类型不匹配。
为什么 video::cue 样式完全不生效
浏览器只在 <track kind="subtitles"></track> 或 <track kind="captions"></track> 正确加载并激活后，才应用 ::cue 规则。常见静默失效原因：
-
<track></track>没放在<video></video>标签内部（JS 动态 append 后需等onload） - VTT 文件首行不是纯文本
WEBVTT（含 BOM、空格、注释都会导致解析失败） -
src返回 404 或被 CORS 拦截（打开 Network 面板确认状态码和 MIME 类型是否为text/vtt） -
kind设成descriptions、chapters等非字幕类型 - 移动端 Safari 自动禁用
srclang与系统语言不匹配的 track
video::cue 支持哪些 CSS 属性
它不是普通 DOM 元素，只接受有限的文本级样式，且所有规则都作用于整条 cue 块（无法选中单个词）：
- 可用：
color、background-color、font-size、font-family、text-shadow、opacity、text-align、line-height、white-space、padding - 不可用：
display（block/inline都无效）、margin、border、transform、filter、box-shadow、position - Safari 不支持
background: linear-gradient()，但background-color可用；Firefox 允许::cue(::first-line)，但 Chrome 和 Safari 不认
如何按类名或 HTML 标签精细控制字幕
VTT 文件里可嵌入类名或内联标签，CSS 对应写法必须严格匹配：
- VTT 中写：
00:00:01.000 --> 00:00:03.000 class:warning→ CSS 写：video::cue(.warning) - 多个类用空格分隔：
class:warning big-text→video::cue(.warning, .big-text)（逗号是“或”关系） - 内联标签如
<b></b>、<i></i>有效：video::cue(b)加粗整条 cue，不是仅加粗其中文字 - 类名只支持 ASCII 字母/数字/连字符，
class:high_light会被忽略，class:high-light才合法 - iOS Safari 至今不支持
::cue(.class)，关键样式必须用全局video::cue兜底
移动端和画中画模式下的实际表现
样式在 PiP 模式下默认继承主视频的 ::cue 规则，但兼容性差异更大：
- iOS Safari 直到 16.4 才支持基础
color和font-size，text-shadow在旧版 Firefox 中也不生效 - 不要依赖
line-height或white-space控制换行——WebVTT 中的\n和align指令才是实际决定因素 - 字体大小推荐用
em或rem，固定px容易在小屏溢出 - 描边比背景更可靠：
text-shadow: 2px 2px 4px black比background-color兼容性更好
真正卡住人的地方，从来不是怎么写样式，而是 VTT 文件编码、<track></track> 位置、kind 值这三处细节——漏一个，::cue 就像没写过一样。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
