::cue样式不生效主因是字幕轨道未加载成功，需确保track标签在video内、VTT文件首行为纯WEBVTT、网络请求正常且MIME类型正确，仅color等有限属性跨浏览器可用。
::cue 样式不生效，90% 是因为字幕轨道压根没加载成功，不是 CSS 写错了。
video::cue 为什么写了但完全没反应
浏览器只对 <track kind="subtitles"></track> 或 <track kind="captions"></track> 且 readyState === 2 的 WebVTT 轨道应用 ::cue 规则。常见静默失效原因：
-
<track></track>没写在<video></video>标签内部（JS 动态插入后样式不会回溯生效） - VTT 文件首行不是纯文本
WEBVTT（带 BOM、空格、注释都会导致解析失败） - Network 面板里 VTT 请求返回 404、CORS 拦截，或 MIME 类型不是
text/vtt -
kind值写成"descriptions"或"chapters"—— 这两类不触发::cue - iOS Safari 自动禁用
srclang与系统语言不匹配的轨道，即使 CSS 写对也渲染不出
哪些 CSS 属性真能用，哪些写了等于白写
::cue 不是普通 DOM 元素，它是合成层里的“影子文本”，所有样式作用于整条 cue 块，无法选中单个词或某一行。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- ✅ 真正跨浏览器可用（Chrome ≥ 115 / Firefox ≥ 119 / Safari 17+）：
color、background-color（linear-gradient()在 Safari 中被忽略）、font-size（推荐用em或rem）、font-family、text-shadow（比 background 更稳）、text-align、padding、opacity - ❌ 明确无效（浏览器直接忽略）：
display、margin、border、position、transform、filter、box-shadow、后代选择器（如video::cue b） - ⚠️ 渲染不稳定：
line-height和white-space效果不可控；换行仍由 VTT 文件中的\n或line:指令决定
怎么按类名或标签做局部样式控制
VTT 文件里可以加 class 提示或内联 HTML 标签，CSS 对应写法必须严格匹配规范，且注意兼容性断层：
立即学习“前端免费学习笔记（深入）”；
- VTT 中写法：
00:00:01.000 --> 00:00:03.000 class:warning→ CSS：video::cue(.warning)（Chrome ≥ 115 / Firefox ≥ 119 支持；iOS Safari 至今不支持） - 多类写法：
class:warning big-text→ CSS：video::cue(.warning, .big-text) - 内联标签有效：
<b>重点</b>→ CSS：video::cue(b)；但<b class="highlight"></b>中的class不会被保留，video::cue(.highlight)不匹配 - 语言标记写法：
video::cue(v[lang="zh"])可用，但实际支持度低，不建议依赖
容易被忽略的细节和上线前必查项
很多项目上线后才发现字幕样式在 Safari 或 iOS 上全无反应，问题往往卡在这些隐性环节：
- VTT 文件必须以 UTF-8 无 BOM 编码保存，首行仅
WEBVTT四个字符，后面不能有任何空格或空行 -
<track></track>的src必须是同源或配好 CORS 头，否则 Network 面板里请求成功但readyState始终为 0 - 不要指望用
display: block控制字幕位置——::cue不支持定位，字幕始终居中底部固定区域 - 如果用了自定义播放器 UI，记得手动调用
track.mode = "showing"，否则即使样式正确也不会显示
