::cue是唯一合法且被广泛支持的字幕伪元素，仅作用于渲染的字幕层，需全局声明、显式设置样式，依赖正确配置的WebVTT文件与track元素。
cue伪元素在CSS里根本不存在
浏览器不支持 ::cue 以外的 cue 相关伪元素，::cue 是唯一合法且被广泛实现的伪元素，用于样式化 WebVTT 字幕轨道中的文本。所谓“cue伪元素”是误传，实际只有 ::cue，没有 ::cue-start、::cue-end 或 ::cue-box 这类东西。
常见错误现象：开发者在 DevTools 里手动添加 ::cue-text 或尝试用 video::cue 嵌套写法，结果样式完全不生效；或者把 ::cue 当成普通选择器加在 span 上，比如 span::cue —— 这样写无效，它只作用于 渲染出的字幕层。
-
::cue必须直接写在全局样式表中（不能在 shadow DOM 内部或 scoped style 里靠 CSS 作用域“穿透”生效） - 它不继承父元素字体、颜色等，所有样式需显式声明
- 部分属性受限：不能设置
display: block、float、position（除position: relative在某些浏览器中可微调偏移）
::cue 可用的样式属性很有限
不是所有 CSS 都能在 ::cue 上起作用。浏览器对字幕渲染层做了安全与性能限制，只开放了基础文本控制能力。比如 font-family、color、text-shadow 都可用，但 background 在 Safari 中默认被忽略（除非配合 background-color + opacity 组合），而 transform、filter、clip-path 全部无效。
使用场景：给字幕加描边提升可读性（尤其白底视频），或统一品牌色；但别指望做动画、渐变背景或响应式排版。
- 推荐组合：
color+text-shadow（如text-shadow: 2px 2px 4px black）比单纯background更兼容 -
font-size推荐用em或rem，避免硬写px—— 字幕容器尺寸由播放器控制，固定像素容易溢出 -
line-height和white-space支持度差，换行行为由 WebVTT 文件中的 \n 和
track 元素必须启用且格式正确，::cue 才会触发
::cue 样式只在 被正确加载并激活时才应用。如果字幕没显示，先别调样式——大概率是轨道没加载成功。
常见错误现象：“写了 ::cue { color: red }，但字幕还是灰色”，十有八九是 的 src 路径 404、MIME 类型不对（服务器没返回 text/vtt）、或 kind="subtitles" 拼错成 "subtitle"（少一个 s）。
- 检查 Network 面板：确认 .vtt 文件返回状态码 200，且响应头含
Content-Type: text/vtt -
必须有kind="subtitles"或kind="captions"，kind="metadata"不触发::cue - WebVTT 文件第一行必须是
WEBVTT（全大写，无空格），否则 Chrome/Firefox 拒绝解析，样式自然不生效
多语言字幕需要单独写 ::cue(:lang())
如果视频提供中英双语字幕轨道，且希望中文用思源黑体、英文用 Inter，不能靠 JS 切换 class，得用 ::cue(:lang(zh)) 和 ::cue(:lang(en)) 分别控制。
注意：这个伪类依赖 WebVTT 文件里每条 cue 的 lang 属性（如 00:00:01.000 --> 00:00:04.000 lang:zh），不是靠浏览器语言或 HTML 的 lang 属性推断。
- 必须在 .vtt 文件中显式标注
lang:xx，否则:lang()匹配失败 -
::cue(:lang(zh))优先级和::cue相同，建议把通用样式写在前面，语言特化样式写在后面 - Safari 对
:lang()支持较晚（iOS 16.4+ / macOS 13.3+），旧版本会回退到无语言区分的::cue
事情说清了就结束。真正难的不是写对 ::cue，而是让 WebVTT 文件、 配置、服务器响应头、浏览器兼容性这四者严丝合缝地咬合上。漏掉任意一环，CSS 都只是躺在那里看热闹。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
