::cue仅作用于video/audio内由加载的WebVTT字幕（非SRT/JS渲染），样式限于颜色、背景、字体等基础属性，不支持后代选择器、属性选择器或伪类，且仅对kind="subtitles"/"captions"有效。
如何用 ::cue 选中并样式化 WebVTT 字幕
能用 ::cue，但仅限于 <track></track> 加载的 WebVTT 字幕（不是 SRT，也不是 JS 动态渲染的字幕），且必须在 <video></video> 或 <audio></audio> 内部才生效。
常见错误是把 ::cue 写在全局 CSS 里却对内联字幕没反应——它不作用于 TextTrackCue 对象的 DOM 节点，而是浏览器合成层的影子内容，只响应视频/音频上下文中的样式规则。
-
::cue不支持所有 CSS 属性，仅允许：颜色、背景、字体、边距、定位（text-align、font-size、color、background、opacity、text-shadow等） - 不能用
::cue(bold)这类伪类；也不支持属性选择器如::cue[lang="zh"] - 若字幕含多行或自定义位置（
line、position指令），::cue无法单独控制某一行——样式是整条 cue 统一应用的
::cue 在 Chrome/Firefox/Safari 中的行为差异
Firefox 最宽松，支持 ::cue(::first-line) 和部分 transform；Chrome 从 v105 起支持 text-shadow，但禁用 display: block；Safari 则至今不支持 background 渐变或 border-radius。
一个典型兼容写法是只用 solid 背景 + padding + 高对比文字色，避免依赖未广泛实现的特性：
立即学习“前端免费学习笔记（深入）”；
video::cue {
color: white;
background-color: rgba(0, 0, 0, 0.8);
padding: 0.2em 0.4em;
font-size: 1.2em;
text-align: center;
}
- Safari 下
background-color有效，但background: linear-gradient(...)会被忽略 - 所有浏览器都不支持
::cue > span这类后代选择器——::cue是原子样式容器，内部无真实 DOM 结构可选 - 若启用字幕轨道后样式没生效，先检查
<track></track>的kind="subtitles"是否正确，且srclang与系统语言匹配（部分浏览器会静默禁用不匹配的 track）
为什么 ::cue 无法修改音轨或章节轨道样式
因为 ::cue 只为 kind="subtitles" 或 kind="captions" 设计，对 kind="descriptions"、"chapters"、"metadata" 完全无效——这些轨道不渲染为可视文本，浏览器根本不触发 cue 渲染流程。
想控制章节导航？得用 JS 读取 video.textTracks[0].cues，手动生成 DOM 并绑定事件；想让描述性音轨有 UI 反馈？只能监听 texttrackchange 后更新自定义面板。
-
<track kind="chapters"></track>的数据仅用于video.duration导航，没有视觉输出，::cue查无此 cue - 即使把
kind="subtitles"改成"metadata"，字幕也不会显示，::cue规则直接失效 - 某些播放器（如 Video.js）会绕过原生 track，用 div 模拟字幕——此时
::cue完全不起作用，得改用 class 选择器
当 ::cue 样式被覆盖或失效时怎么排查
最常被忽略的是层叠顺序：原生字幕样式优先级高于普通 CSS，但低于 !important 和内联 style（不过内联 style 无法加到 ::cue 上）。
排查步骤很直接：
- 打开 DevTools → Elements 面板，切换到 video 元素，勾选 “Show user agent shadow DOM” ——能看到
#text-track-display区域，确认字幕是否真被渲染出来 - 在 Styles 面板里搜索
::cue，看对应规则是否被划掉（说明被更高优先级规则覆盖） - 临时加一条
video::cue { outline: 2px solid red !important; }，如果没红框，说明根本没命中——检查 track 是否已mode = "showing"，或是否被 JavaScript 设置了textTracks[i].mode = "disabled" - 移动端 Safari 偶尔会因
viewport缩放导致字幕尺寸异常，此时需配合video::-webkit-media-text-track-display（仅 WebKit）做微调
真正麻烦的不是写不对，而是它只在特定上下文、特定 track 类型、特定浏览器版本里才“看得见”——漏掉任意一环，样式就彻底消失，还没报错。
