video::cue 样式无效的主因是 track 未加载成功或类型不匹配：track 必须位于 video 内部、kind 为 subtitles/captions、VTT 首行为纯 WEBVTT、路径有效且无跨域，否则样式静默失效。
::cue 只对 <track kind="subtitles"> 或 <track kind="captions"> 有效，且必须加载 WebVTT 文件（首行是 WEBVTT），否则样式完全不生效。
为什么写了 video::cue 却没反应
常见原因不是 CSS 写错，而是轨道根本没加载成功或类型不匹配：
-
<track>必须放在<video>标签内部，不能用 JS 动态 append 后再指望样式立刻生效 -
kind值必须是"subtitles"或"captions"；"descriptions"、"chapters"、"metadata"不触发 ::cue 渲染 - VTT 文件首行必须是纯文本
WEBVTT（不能有 BOM、空格或注释），否则浏览器解析失败，track.readyState永远不等于2 -
src路径 404 或跨域被拦截时，::cue规则会被静默忽略——检查 Network 面板确认 VTT 加载状态 - 部分浏览器（如旧版 Safari）会根据
srclang和系统语言自动禁用不匹配的 track，导致样式“看起来没生效”
video::cue 支持哪些样式属性
它不是普通 DOM 元素，只接受有限的 CSS 属性，且所有样式都作用于整条 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、后代选择器（如::cue b） - Safari 不支持
background: linear-gradient()，但background-color可用；Chrome 禁用display: block，Firefox 允许::cue(::first-line)（但不跨浏览器）
如何按类名或标签精细化控制字幕
VTT 文件里可以用 class 提示或内联 HTML 标签，配合 ::cue() 实现局部样式：
立即学习“前端免费学习笔记（深入）”；
- VTT 中写法（注意空格分隔，类名只支持 ASCII 字母/数字/连字符）：
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>、<i>有效：video::cue(b) { font-weight: bold; }，但<span class="x">无效 - 注意：Chrome ≥ 115、Firefox ≥ 119 才支持
::cue(.class)；iOS Safari 至今不支持类选择器，需降级为全局样式兜底
移动端和画中画模式下的兼容性要点
样式在 PiP 模式下默认继承主视频的 ::cue 规则，但实际渲染表现更脆弱：
- iOS Safari 字体加载延迟可能导致首次 PiP 进入时无样式，建议预加载字体或用系统字体栈（如
font-family: -apple-system, sans-serif） - 低分辨率屏上
text-shadow容易糊成一片，可改用background-color+padding提升可读性 - PiP 窗口尺寸小，
font-size建议用rem或em，避免固定像素值导致文字过小 - 不要依赖
::cue-region—— 它在 Safari 和旧 Chrome 中支持极差，且无法控制单条 cue 的位置
真正卡住人的往往不是怎么写样式，而是 track 没加载成功、VTT 格式不合法、或浏览器根本不认这个 kind。先用 console.log(video.textTracks[0].readyState) 确认值为 2，再调样式，省掉 80% 的排查时间。
