::cue伪元素仅作用于已加载激活的webvtt字幕轨道，不支持嵌套选择器或html标签样式化，且仅在track.readystate===2、src可访问、首行为webvtt时生效；类选择器::cue(.class)仅chrome≥115/firefox≥119支持，safari至今不支持，类名须为ascii字母数字连字符且大小写敏感。
::cue 不支持嵌套选择器，只作用于单个 cue 文本块整体
浏览器对 ::cue 的实现是原子级的——它不把 WebVTT 中的 <b></b>、<i></i> 当作真实 DOM 节点，而是作为内联格式提示渲染。因此你不能写 ::cue b 或 ::cue > span，这类选择器会被直接忽略。
常见错误现象：
- 写了
::cue .highlight但没生效，结果发现 WebVTT 文件里根本没加class:highlight - 试图用
::cue([lang="en-US"])匹配语言，实际不支持属性选择器 - 在 Safari 上调试半天，才发现它至今（iOS 16.4+）仍不支持类选择器语法
可用的写法仅限：
-
::cue（全局匹配所有字幕块） -
::cue(.warning)（Chrome ≥ 115 / Firefox ≥ 119 支持，需 WebVTT 中显式写class:warning） -
::cue(v[title="John"])这类写法完全非法，v不是合法伪元素名
WebVTT 文件格式和加载状态决定 ::cue 是否触发
::cue 样式只在 <track></track> 元素满足三个硬性条件时才可能生效：已挂载在 <video></video> 内、src 可访问且返回 200、track.readyState === 2（即 loaded）。任意一环断开，样式就静默失效。
容易踩的坑：
- 用 JS 动态
appendChild添加<track></track>后立刻写样式——此时readyState还是 0，::cue不会应用 - WebVTT 首行不是
WEBVTT（比如多了 BOM 或空格），解析失败，readyState卡在 0 - CORS 阻止了
src加载，控制台报错但::cue不报错，容易误判为样式问题
调试建议：先在控制台确认 document.querySelector('track').readyState === 2，再检查网络面板看字幕文件是否成功加载。
类名写法受限，大小写与字符集必须严格匹配
WebVTT 中的 class: 声明不是 HTML class 属性，而是一个纯标识符字段。它只接受 ASCII 字母、数字和连字符，不支持下划线、中文、空格或 Unicode 字符。
实操要点：
-
class:high-light✅ 合法；class:high_light❌ 下划线不识别 -
class:Warning和::cue(.warning)不匹配——大小写敏感 - 多个类用空格分隔：
class:warning big-text，对应::cue(.warning, .big-text)（逗号表示“或”关系） - JS 动态注入 WebVTT 内容时，确保类名字符串未被 URL 编码（如
class%3Awarning会失效）
移动端 Safari 是最大兼容瓶颈
iOS Safari 对 ::cue 的支持最弱：直到 16.4 才开始支持基础样式（color、font-size），且至今不支持 ::cue(.class) 类选择器。这意味着你在 Chrome 里调好的高亮效果，在 iPhone 上大概率是纯白底黑字。
关键应对策略：
- 核心样式（如字体大小、颜色）用无类名的
::cue声明，保证降级可用 - 类选择器样式视为增强，不依赖它实现功能完整性
- 避免在
::cue中使用box-shadow或filter，重绘开销大，尤其在低端设备上易卡顿
真正难搞的从来不是怎么写样式，而是怎么让同一份 WebVTT 在 Chrome、Firefox 和 Safari 上都呈现出接近一致的视觉反馈——这需要你从第一行 WEBVTT 开始就考虑兼容边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
