video:fullscreen 样式不生效的主因是 requestFullscreen() 未成功触发，需确保用户手势同步调用、iframe 含 allow="fullscreen"、页面聚焦且无拦截；CSS 必须精确匹配全屏元素（如 video:fullscreen），补全浏览器前缀，并配合 fullscreenchange 事件处理进出状态。
video:fullscreen 样式不生效？先确认 requestFullscreen() 真的触发了
写了 video:fullscreen { width: 100vw; } 却没反应，大概率不是 CSS 写错了，而是 JS 根本没成功进全屏。浏览器对 requestFullscreen() 有硬性限制：
- 必须由用户手势（如
click、touchend）同步调用，不能包在setTimeout、Promise.then或任何异步回调里 - iframe 嵌套时需带
allow="fullscreen"属性 - 页面未聚焦、跨域或被其他脚本拦截，也会静默失败
实操建议：在按钮的 onclick 中直接调用 myVideo.requestFullscreen()；调用后立刻检查 document.fullscreenElement —— 如果是 null 或不是你的 video 元素，说明没进全屏；加 try/catch 捕获异常，常见错误是 NotAllowedError（非手势触发）或 TypeError（API 不可用）。
:fullscreen 选择器必须精确匹配被全屏的 DOM 节点
:fullscreen 只对真正调用 requestFullscreen() 的那个元素生效，不认 class 名“看起来像”，只认真实 DOM 身份。比如 JS 对 document.getElementById('player') 调用了全屏，但 CSS 写的是 .player:fullscreen，而该元素没有 player 这个 class，样式就被忽略。
- 错误写法：
body:fullscreen、div:fullscreen——body几乎从不被全屏，现代浏览器直接跳过整条规则 - 错误写法：
:fullscreen单独使用 —— 没绑定具体元素，现代浏览器会忽略 - 正确做法：用
console.log(document.fullscreenElement)看返回值，然后按它的标签名、ID 或 class 写选择器，例如#player:fullscreen、video:fullscreen - 如果元素本身有
display: none或visibility: hidden，进全屏后照样不可见
浏览器前缀一个都不能少，拼错就失效
现代浏览器（Chrome 65+、Firefox 64+、Safari 15.4+）支持无前缀 :fullscreen，但若需兼容旧版 Safari 或 Firefox，必须并列写出全部有效前缀：
立即学习“前端免费学习笔记（深入）”；
-
video:fullscreen { width: 100vw; }—— 标准写法 -
video::-webkit-full-screen { width: 100vw; }—— 注意是双冒号 + 两个连字符（-），不是三个；::-webkit-full-screen（三冒号）是错的 -
video::-moz-fullscreen { width: 100vw; }——moz小写，不是Moz或MOZ；::-moz-full-screen（带额外短横线）也是错的 - 别混用：
video:-webkit-full-screen（单冒号）语法错误；video::-ms-fullscreen已可忽略（旧 Edge 基本淘汰）
漏掉任一版本，对应浏览器就完全失效，而且不会报错、不会警告，只是静默不生效。
:fullscreen 是单向覆盖，退出后样式不会自动还原
:fullscreen 只负责“进全屏时加样式”，不管“出全屏时删样式”。如果你只写了 .player:fullscreen { padding: 0; }，退出后 padding 依然是 0，后续布局可能错乱。
- 推荐写法：先定义基础样式（非全屏态），再用
:fullscreen做增量调整，例如：.player { padding: 20px; }+.player:fullscreen { padding: 0; font-size: 2rem; } - 需要动态响应进出，得靠
fullscreenchange事件配合document.fullscreenElement判断，比如加/删 class 或切换内联style - 别依赖
:fullscreen控制关键布局属性（如position、z-index），容易在退出后残留副作用 - 子元素不继承
:fullscreen—— 想改控件大小或字体，必须显式写组合选择器，例如video:fullscreen .controls { font-size: 1.5rem; }
最常被忽略的一点：移动端 Safari 完全不支持 :fullscreen 伪类，必须用 fullscreenchange 事件 + 手动标记状态来兜底。
