::cue样式不生效主因是字幕轨道未加载成功，需确保track标签在video内、vtt文件首行为纯webvtt、网络请求正常、kind为subtitles/captions且readystate===2。
::cue 样式不生效，90% 是因为字幕轨道根本没加载成功，不是 CSS 写错了。
video::cue 为什么写了却没反应
浏览器只对 <track kind="subtitles"></track> 或 <track kind="captions"></track> 且 readyState === 2 的 WebVTT 轨道应用 ::cue 规则。常见静默失效原因：
-
<track></track>标签没写在<video></video>内部（比如放在下或用 JS 动态 append） - VTT 文件首行不是纯文本
WEBVTT（含 BOM、空格、注释都会导致解析失败） - Network 面板里 VTT 请求返回 404、CORS 拦截，或 MIME 类型不是
text/vtt -
kind值写成"descriptions"或"chapters"—— 这两类不触发::cue - iOS Safari 自动禁用
srclang与系统语言不匹配的轨道，哪怕样式写了也压根不渲染
哪些 CSS 属性真能用，哪些写了等于白写
::cue 不是普通 DOM 元素，它是浏览器合成层里的“影子文本”，所有样式作用于整条 cue 块，无法选中单个词或某一行。
- ✅ 真正跨浏览器可用（Chrome ≥ 115 / Firefox ≥ 119 / Safari 17+）：
color、background-color（linear-gradient()在 Safari 中被忽略）、font-size（推荐用em或rem）、font-family、text-shadow（比background更兼容）、text-align、padding、opacity - ❌ 明确无效（写了也不渲染）：
display、margin、border、position、transform、filter、box-shadow、后代选择器（如video::cue b） - ⚠️ 行为不稳定：
line-height和white-space对换行影响极小，实际换行仍由 VTT 文件中的\n或line:指令控制
如何按类名或标签做局部样式控制
VTT 文件里可以加 class 提示或内联 HTML 标签，配合 ::cue() 实现局部控制，但支持度差异大：
- VTT 中写法（注意空格分隔）：
00:00:01.000 --> 00:00:03.000 class:warning后接字幕正文 - CSS 写法：
video::cue(.warning) { color: #e74c3c; } - 多类支持：
class:warning big-text→video::cue(.warning, .big-text) - 内联标签有效：
<b>重点</b>→video::cue(b) { font-weight: bold; } - ⚠️ 注意：
<b class="highlight"></b>中的class不会被保留，video::cue(.highlight)不匹配 - 兼容性坑点：Chrome ≥ 115、Firefox ≥ 119 才支持
::cue(.class)；iOS Safari 至今不支持类（截至 2026 年 7 月）
真正容易被忽略的细节
很多人调了半天字体大小和颜色，最后发现字幕根本没进渲染管线——track.readyState 始终是 0 或 1，console.log(video.textTracks) 里看不到有效轨道。这时候改 CSS 没有任何意义。务必先确认 VTT 文件能被浏览器正确解析并就绪，再谈样式。另外，::cue-region 可控字幕整体容器背景，但它和 ::cue 是两个独立伪元素，不能混用，也极少被文档提及，但线上复杂排版时可能绕不开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
