video::cue样式不生效主因是字幕轨道未加载成功，需确保track在video内、VTT首行为纯WEBVTT、MIME为text/vtt、kind为subtitles/captions，且iOS Safari语言匹配；可用属性限于color、font-size等，display/margin等无效。
::cue 样式不生效，90% 是因为字幕轨道根本没加载成功，不是 CSS 写错了。
video::cue 为什么写了却没反应
浏览器只对 <track kind="subtitles"> 或 <track kind="captions"> 且 readyState === 2 的 WebVTT 轨道应用 ::cue 规则。常见静默失效原因：
-
<track>没写在<video>标签内部（JS 动态插入后样式不会回溯生效） - VTT 文件首行不是纯文本
WEBVTT（含 BOM、空格、注释都会导致解析失败） - Network 面板里
.vtt请求返回 404、CORS 拦截，或 MIME 类型不是text/vtt -
kind值写成"descriptions"或"chapters"—— 这两类不触发::cue - iOS Safari 自动禁用
srclang与系统语言不匹配的轨道（即使写了default也无效）
哪些 CSS 属性真能用，哪些写了等于白写
::cue 渲染的是浏览器合成层里的“影子文本”，不是真实 DOM，所有样式作用于整条 cue 块，无法选中单个词或某一行。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- ✅ 真正跨浏览器可用（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 用 ::cue(.xxx) 或 ::cue(b) 匹配，但支持度差异大：
立即学习“前端免费学习笔记（深入）”；
- VTT 中写法（注意空格分隔）：
00:00:01.000 --> 00:00:03.000 class:warning→ CSS：video::cue(.warning) { color: #e74c3c; } - 多类支持：
class:warning big-text→video::cue(.warning, .big-text) - 内联标签有效：
<b>重点</b>→video::cue(b) { font-weight: bold; } - ⚠️
<b class="highlight">中的class不会被保留，video::cue(.highlight)不匹配 - ⚠️ iOS Safari 至今不支持类选择器（截至 2026 年 10 月）；
::cue(.class)仅 Chrome ≥ 115 / Firefox ≥ 119 支持
容易被忽略的细节：位置、字体 fallback 和调试路径
很多人卡在“明明写了样式，但字幕还是黑底白字”。真正关键的不是调参，而是确认渲染链路是否完整：
- 用
video.textTracks在控制台检查轨道是否出现在列表中，再查track.readyState是否为2 - 中文字体建议 fallback 到
"PingFang SC", "Microsoft YaHei", sans-serif，避免小屏下字形缺失 -
padding别设过大，多行字幕可能被容器截断（::cue-region才控制区域背景，但支持度更低） - 不要依赖
text-align: center强制居中——VTT 中的align:center指令才起效，CSS 只是辅助
