video::cue 样式不生效主因是轨道未加载成功，需确保 track 在 video 内、VTT 文件规范（WEBVTT 开头、text/vtt 类型、200 响应）、kind 为 subtitles/captions 且 readyState===2；可用样式限 color、font-size 等少数属性，class 提示可实现分组样式，多语言切换时须确认目标轨道 mode=showing 且 readyState=2。
video::cue 样式不生效，90% 是轨道没加载成功，不是 CSS 写错了。
为什么 video::cue 一点反应都没有
浏览器只对 <track kind="subtitles"></track> 或 <track kind="captions"></track> 且 readyState === 2 的轨道应用 ::cue 规则。常见失效原因包括：
-
<track></track>没写在<video></video>标签内部（动态 append 不行） - VTT 文件首行不是纯文本
WEBVTT（不能带 BOM、空格或注释） - Network 面板里 VTT 请求返回 404 或 MIME 类型不是
text/vtt -
kind值写成"descriptions"或"chapters"—— 这两类不触发::cue - iOS Safari 会静默跳过
srclang与系统语言不匹配的轨道（哪怕你手动track.mode = "showing"）
video::cue 能用和不能用的 CSS 属性
::cue 渲染的是合成层里的“影子文本”，不是真实 DOM，所以样式能力受限。真正跨浏览器稳定可用的只有：
-
color、background-color（注意 Safari 忽略background: linear-gradient()） -
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、margin、border、transform、filter、box-shadow、position - 后代选择器（如
video::cue b或video::cue > span） -
::cue(::first-line)（仅 Firefox 支持，Safari/Chrome 不认）
按角色或语言差异化样式：VTT 里加 class 提示
VTT 文件本身不支持 CSS 选择器，但可以用 class 提示配合 ::cue(.xxx) 实现分组样式。前提是 VTT 内容要规范写法：
立即学习“前端免费学习笔记（深入）”；
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
00:00:02.000 --> 00:00:05.000 class:dialog 这是对话字幕 00:00:06.000 --> 00:00:09.000 class:narration (画外音)
对应 CSS 写法：
video::cue(.dialog) {
color: #4a90e2;
font-weight: bold;
}
video::cue(.narration) {
color: #777;
font-style: italic;
}
注意：class 提示必须紧跟在时间轴后、字幕内容前，中间不能换行；多个 class 用空格分隔，如 class:dialog important。
多语言字幕切换时样式丢失？检查 default 和 mode
浏览器默认只对 default 属性标记的轨道或 mode === "showing" 的轨道渲染 ::cue。如果手动切换语言后样式失效，大概率是新激活的轨道没被浏览器识别为“当前活跃”：
- 确保只有一个
<track></track>带default（否则行为未定义） - 用 JS 切换时，别只改
track.mode，还要确认目标track.readyState === 2，再设track.mode = "showing" - 不要依赖
video.textTracks[n].mode = "showing"后立刻生效——得监听load或onload事件 - CSS 中避免写太具体的层级，比如
video#myVideo::cue在某些 Safari 版本下会失效，直接用video::cue更稳
最常被忽略的一点：VTT 文件路径错、MIME 类型错、kind 错——这三样只要一个不对，::cue 就彻底静默，连报错都不会有。
