video::cue 样式不生效的主因是 track 未就绪（readystate ≠ 2），需确保 track 在 video 内、vtt 首行为纯 webvtt、content-type 为 text/vtt、kind 为 subtitles/captions，且 srclang 匹配系统语言；支持 color、font-size 等有限属性，不支持 display、margin 等；类选择器仅 chrome≥115/firefox≥119 支持，ios safari 不支持；调试应先查 readystate 和网络加载状态。
video::cue 样式不生效，先检查轨道是否真就绪
90% 的“写了没反应”问题，根源是 track 根本没被浏览器识别为有效字幕层。浏览器只对 readyState === 2 的 <track kind="subtitles"></track> 或 <track kind="captions"></track> 应用 ::cue 规则。
必须确认以下几点：
-
<track></track>标签写在<video></video>内部，不能靠 JS 动态插入后再加样式 - VTT 文件首行必须是纯文本
WEBVTT（无 BOM、无空格、无注释） - Network 面板里 VTT 请求返回
200，响应头Content-Type是text/vtt -
kind值只能是"subtitles"或"captions"；设成"descriptions"或"chapters"时::cue完全不触发 - iOS Safari 会静默禁用
srclang与系统语言不匹配的轨道——即使 CSS 写对了，它也压根没渲染
哪些 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:指令控制，CSS 干预能力很弱）
明确无效的属性（写了也白写）：
-
display（block/inline全部被忽略） -
margin、border、transform、filter、box-shadow、position - 后代选择器（如
video::cue b或video::cue > span） -
::cue(::first-line)（仅 Firefox 支持，不跨浏览器）
如何用 VTT class 实现局部样式控制
VTT 文件里可以声明 class 提示，CSS 用 video::cue(.classname) 匹配，但要注意兼容性断层：Chrome ≥ 115、Firefox ≥ 119 才支持，iOS Safari 至今不支持类名选择器（截至 2026 年 9 月）。
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)，但 <b class="highlight"></b> 中的 class 不会被保留，::cue(.highlight) 不匹配。
容易被忽略的渲染边界和调试习惯
最常被跳过的其实是“字幕块不可分割”这个前提：无论你设多大 font-size 或 padding，只要超出视频容器高度，浏览器就会自动裁剪，不会换行或撑开。而换行逻辑完全由 VTT 文件里的 \n 和 line: 指令决定，CSS 几乎无法干预。
调试建议直接看三点：
- 打开 DevTools 的 Elements 面板，搜索
video::cue是否出现在 computed styles 里（若没出现，说明轨道未就绪） - 在 Console 执行
document.querySelector('video').textTracks[0].readyState，确认是否等于2 - 用 curl 或 Network 面板验证 VTT 文件是否真被加载（404、CORS、MIME 错误都会导致样式静默失效）
复杂点在于：你写的每一条 ::cue 规则，都依赖于一个看不见的、非 DOM 的渲染层。它不响应重排重绘，也不暴露节点，出了问题只能倒推轨道状态——而不是改 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
