无法用纯CSS响应video暂停状态，因CSS无:paused伪类且poster仅初始生效；必须结合JS监听pause/play事件控制自定义封面层显隐，或用radio:checked模拟（但不同步真实状态）。
无法直接用 CSS 选择器监听或响应 video 的“暂停”状态（比如暂停时显示封面），因为浏览器不提供 :paused 这类伪类，且 poster 属性仅在初始加载/重置时生效，暂停后不会自动恢复显示。
为什么 :paused 不存在且不能用 :not(:playing) 替代
CSS 规范中从未定义 :paused 伪类；:playing 也未被标准化（Chrome 曾实验性支持但已移除）。试图用 video:not(:playing) 或 video:is(:paused, :waiting, :stalled) 均无效——这些伪类要么不存在，要么不被任何主流浏览器实现。
- 浏览器只暴露有限的媒体伪类：
::-webkit-media-controls系列仅用于控制栏内部样式，不反映播放/暂停逻辑状态 -
poster是 HTML 属性，不是 CSS 可监听的状态；它只在loadstart或load阶段渲染一次，暂停时 DOM 中并无对应 class 或属性变更 - 即使手动给
video添加pausedclass，CSS 也无法基于该 class 自动切换poster显示——因为poster是内建行为，不可通过 CSS 控制显隐
真正可行的封面控制方式：用 poster + 自定义封面层叠加
必须放弃“纯 CSS 响应暂停状态”的幻想，转为组合 HTML/CSS/JS 实现视觉等效效果。核心是：隐藏原生 poster，用绝对定位的 <img> 或 <div> 模拟封面，并由 JS 控制显隐。
- 先禁用原生 poster 渲染干扰：
video[poster] { background: none; }（部分浏览器仍会闪现，需配合 JS 移除属性） - HTML 中紧邻
video放一个封面容器：<div class="video-poster"><img src="cover.jpg" alt=""></div> - 用 JS 监听
pause和play事件，动态切换.video-poster的display或visibility - CSS 中确保封面层覆盖视频区域：
.video-poster { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
用 :checked + 单选按钮模拟“暂停态封面”（无 JS 方案）
若严格拒绝 JS，唯一能稳定触发 CSS 状态切换的是表单控件伪类。可将播放/暂停逻辑映射到单选按钮组，利用 :checked 控制封面显隐。
立即学习“前端免费学习笔记（深入）”；
- HTML 结构示例：
<input type="radio" name="player-state" id="state-paused" checked><label for="state-paused"><div class="video-poster"></div></label> - 播放时点击另一按钮：
<input type="radio" name="player-state" id="state-playing">，此时#state-paused:checked ~ .video-poster失效 - 缺点明显：无法同步真实播放状态；用户操作与视频实际状态可能脱节；需要额外 UI 引导用户理解这是“模式开关”而非真实控件
容易忽略的关键点
很多人卡在“以为 poster 是 CSS 可控状态”，其实它只是初始占位符。真正复杂的是状态同步——JS 方案里，timeupdate、ended、error 等事件都会影响封面是否该显示；而纯 CSS 方案本质是放弃同步，只做静态状态映射。没有银弹，只有根据需求权衡：要不要真实状态？能不能接受 JS？是否允许用户误操作？这些决定了你最终用哪一层逻辑去“假装”暂停封面存在。
