video::cue 样式生效的前提是 track 元素正确加载 WebVTT 字幕文件且 readyState 为 2；常见失效原因包括 track 位置错误、kind 值非 subtitles/captions、VTT 首行格式不符、资源加载失败或 Safari 因 srclang 自动禁用轨道。
::cue 伪元素能控制字幕样式，但只在 <track kind="subtitles"> 或 <track kind="captions"> 正确加载 WebVTT 文件后才生效；写错位置、格式或属性都会导致样式静默失效。
video::cue 样式不生效的常见原因
不是 CSS 写错了，而是轨道根本没被浏览器识别为有效字幕层：
-
<track>必须写在<video>标签内部，不能用 JS 动态插入后再指望样式立刻生效 -
kind值必须是"subtitles"或"captions"；"descriptions"、"chapters"等类型不触发::cue - VTT 文件首行必须是纯文本
WEBVTT（无 BOM、无空格、无注释），否则解析失败，track.readyState永远不等于2 - 检查 Network 面板：若
src返回 404 或跨域被拦截，::cue规则会被浏览器静默忽略 - Safari 可能根据
srclang和系统语言自动禁用 track，导致“样式写了但没反应”
哪些 CSS 属性在 ::cue 上真正可用
::cue 不是普通 DOM 元素，它只接受有限的、与文本渲染强相关的属性，且所有样式作用于整条 cue 文本块（无法选中单个词）：
- ✅ 支持：
color、background-color、font-family、font-size（推荐用em或rem）、text-shadow（比background更兼容）、text-align、padding、opacity - ❌ 不支持：
display（block/inline均无效）、margin、border、position、transform、filter、box-shadow、后代选择器（如::cue b） - ⚠️ 浏览器差异：
background: linear-gradient()在 Safari 中无效；::cue(::first-line)仅 Firefox 支持；line-height和white-space渲染效果不稳定，换行仍由 VTT 文件中的\n控制
如何按类名或标签做精细化样式控制
VTT 文件里可以用 class 提示或内联 HTML 标签，配合 ::cue() 实现局部样式，但要注意浏览器支持度：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 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) { font-weight: bold; }；但<b class="highlight">中的class不会被保留，::cue(.highlight)不匹配 - 兼容性坑点：Chrome ≥ 115、Firefox ≥ 119 才支持
::cue(.class)；iOS Safari 至今不支持类选择器，必须兜底全局样式
移动端和画中画（PiP）模式下的实际表现
样式在 PiP 下会继承主视频的 ::cue 规则，但渲染更脆弱，容易出现字体未加载、描边糊化、位置偏移等问题：
- iOS Safari 字体加载有延迟，首次进入 PiP 时可能短暂无样式，需预加载字体或用系统默认字体兜底
-
text-shadow在低分辨率屏上易糊成一团，建议用text-shadow: 1px 1px 2px black而非更大值 - PiP 模式下
background-color可能被压缩或裁剪，优先靠text-shadow提升可读性，而非依赖背景块 - 不要假设
::cue-region可控——它在多数移动端浏览器中尚未稳定支持，目前只有::cue是可靠入口
最常被忽略的是：VTT 文件是否真的被解析成功。样式调得再细，如果 track 的 readyState 不是 2，::cue 就是死代码。打开 DevTools 的 Network 面板确认 VTT 加载状态，比反复改 CSS 更快定位问题。
