::cue伪元素不生效的主因是webvtt轨道未正确加载或格式错误，其次才是样式限制；需确保track标签有效、vtt文件首行为“webvtt”、时间戳规范，并仅使用支持的css属性进行扁平化样式设置。
::cue 伪元素不生效？先确认 WebVTT 文件加载和格式正确
浏览器只在 <track></track> 标签正确关联且 WebVTT 文件被解析为字幕轨道后，::cue 才会起作用。常见现象是写了样式但字幕完全没变化——大概率不是 CSS 问题，而是轨道根本没加载成功。
-
<video></video>必须有<track kind="subtitles" src="sub.vtt"></track>，且src路径可访问（检查 Network 面板是否返回 200） - WebVTT 文件首行必须是
WEBVTT（严格大小写，前后不能有空格或 BOM） - 时间戳格式错误（如用逗号代替小数点、缺少空行）会导致整条轨道被忽略，
::cue自然无效 - Chrome/Firefox 对
NOTE块或非法注释容忍度不同，建议删掉所有非标准行
::cue 选择器的层级和继承限制很严格
::cue 是一个原子伪元素，它不接受嵌套选择器（比如 ::cue span 无效），也不能通过父容器类名提高优先级（.my-video ::cue 和 ::cue 权重相同）。它的样式能力本质是“扁平覆盖”，而非常规 DOM 选择。
- 只支持有限 CSS 属性：字体相关（
font-family、font-size）、颜色（color、background-color）、边距（padding）、文字装饰（text-shadow、text-align）等；display、position、transform均被忽略 - 不能用
::cue(:first-line)或::cue(.class)—— WebVTT 中没有 class，也没有可选中的子元素 - 若需差异化样式（如不同语言字幕），只能靠多个
<track></track>+ 不同srclang，再用属性选择器：track[srclang="zh"]::cue
WebVTT 内联 CSS 类不触发 ::cue 样式
有人试图在 VTT 文件里写 <b class="highlight">text</b>，再用 ::cue(.highlight) 匹配 —— 这不会生效。WebVTT 解析器不把 HTML 标签当 DOM 节点处理，所有标签仅用于基础语义（<b></b>、<i></i>），且不保留 class 属性。
- VTT 中的
<c.highlight></c.highlight>是合法语法（<c></c>表示 CSS 类），但浏览器目前**不支持**通过::cue(.highlight)选中它；只有::cue全局匹配或::cue(b)这类标签匹配可用 - 想加粗/斜体，直接用
<b>xxx</b>或<i>xxx</i>，然后配::cue(b) { font-weight: bold; } - Firefox 支持
::cue(c)匹配任意<c.xxx></c.xxx>，但 Chrome/Safari 不支持，跨浏览器方案只能靠统一::cue+ 时间轴分段或多个 track
移动端兼容性与性能细节容易被忽略
iOS Safari 对 ::cue 的支持从 iOS 10 开始，但存在两个隐藏坑：一是字体加载延迟导致首次渲染无样式，二是 text-shadow 在低分辨率屏上可能糊成一片。
立即学习“前端免费学习笔记（深入）”；
- Android WebView（尤其旧版）对
::cue的支持断层明显，4.4–6.x 基本不支持；检测方式：运行getComputedStyle(document.querySelector('video'), '::cue').color，返回空字符串即不支持 - 避免在
::cue中使用大体积自定义字体（@font-face），移动端字幕渲染是独立合成层，字体加载失败时会回退到系统默认，且无 fallback 提示 - 如果字幕需高对比度（如深色背景+浅色字），别只依赖
color，加上text-shadow: 0 0 4px black更可靠——这是少数几个真正跨平台生效的增强手段
