video::cue样式不生效的主因是字幕轨道未加载成功，需确保track标签在video内、vtt文件格式正确、mime类型为text/vtt、kind值为subtitles或captions，且ios safari语言匹配；可用属性限于color、font-size等扁平化样式，display/margin等无效。
video::cue 样式不生效，先别改 CSS
90% 的“样式没反应”问题，根源不在 CSS 写错，而在字幕轨道压根没加载成功。浏览器只对 <track kind="subtitles"></track> 或 <track kind="captions"></track> 且已就绪（readyState === 2）的 WebVTT 轨道应用 ::cue 规则。
检查这几点：
-
<track></track>必须写在<video></video>标签内部，不能靠 JS 动态 append 后再指望样式立刻生效 - VTT 文件首行必须是纯文本
WEBVTT（无 BOM、无空格、无注释） - Network 面板确认 VTT 请求返回 200，MIME 类型为
text/vtt，且没被 CORS 拦截 -
kind值只能是"subtitles"或"captions"；设成"descriptions"或"chapters"时::cue完全不触发 - iOS Safari 会静默禁用
srclang与系统语言不匹配的轨道——即使你写了video::cue，它也根本没渲染
哪些 CSS 属性真能用，哪些只是看着像
::cue 不是普通 DOM 元素，它是浏览器合成层里的“影子文本”，只接受有限的扁平化样式。所有规则都作用于整条 cue 块，无法选中单个词或某一行。
真正跨浏览器可用的属性（Chrome / Firefox / Safari 主流版本均支持）：
-
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 文件里可以嵌入语言标记或内联 HTML 标签，CSS 对应写法必须严格匹配规范，且要注意兼容性断层。
安全写法（全平台支持）：
- 用
v[lang="zh"]匹配中文字幕：video::cue(v[lang="zh"]) { font-family: "Microsoft YaHei"; line-height: 1.4; } - 用
<b></b>、<i></i>标签加粗/斜体：video::cue(b) { font-weight: bold; }（注意：不是video::cue > b） - 全局兜底样式必须存在：
video::cue基础规则不能省，iOS Safari 至今不支持类选择器
有条件可用（需验证目标环境）：
- VTT 中写
class:warning，CSS 写video::cue(.warning)—— Chrome ≥ 115、Firefox ≥ 119 支持，但 iOS Safari 仍不认 - 多个类用空格分隔：
class:warning big-text→video::cue(.warning, .big-text)（逗号表示“或”关系） - 类名只支持 ASCII 字母、数字、连字符：
class:high-light合法，class:high_light会被忽略
移动端和画中画模式下的隐藏坑
PiP 模式下样式默认继承主视频，但兼容性进一步缩水，很多开发在桌面测完就上线，结果 iOS 用户看到的是裸奔字幕。
关键限制点：
- iOS Safari 直到 16.4 才支持
text-shadow，旧版只能靠color + background-color + padding组合保可读性 - 字体加载延迟可能导致首次 PiP 进入时字幕短暂无样式，建议预加载关键字体或用系统字体兜底
- 不要依赖
line-height控制垂直位置——VTT 时间块里的line:80%或align:end才是真正起效的排版指令 - 画中画窗口尺寸小，
font-size: 16px可能撑满屏幕，优先用相对单位：font-size: 1.2em
最常被忽略的一点：样式表必须写在全局 <style></style> 或外链 CSS 中，不能放在 shadow DOM 内，也不能靠 scoped style “穿透”生效——::cue 只响应 video 上下文中的全局规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
