:fullscreen伪类仅对调用requestfullscreen()的实际元素生效，需严格匹配元素身份、补全浏览器前缀、避免ios兼容问题，并配合fullscreenchange事件实现进出状态控制。
为什么写了.player:fullscreen却完全没反应
根本不是选择器写法错，而是浏览器压根没把那个元素当成全屏目标——:fullscreen只对真正调用过requestFullscreen()的 DOM 节点生效，不看 class 名是否“看起来像”，只认实际调用时的元素身份。
常见错误包括：
- JS 对
document.getElementById('video-wrap')调用了requestFullscreen()，但 CSS 写的是.player:fullscreen，而该元素没有player这个 class → 样式被忽略 - 写了
body:fullscreen或div:fullscreen→body几乎从不进全屏，现代浏览器直接跳过整条规则 - 元素本身有
display: none或visibility: hidden→ 进全屏后照样不可见，伪类生效了也白搭 - 用
console.log(document.fullscreenElement)一看，返回的是<video id="main-video"></video>，但你 CSS 写的是.video-player:fullscreen→ ID 和 class 不匹配，选不到
:fullscreen 的浏览器前缀必须全部写上
Chrome 71 前、Firefox 64 前、Safari 15.4 前都不支持无前缀的 :fullscreen。漏掉任一版本，对应浏览器就完全失效，而且不会报错、不会警告，只是静默不生效。
标准写法必须并列声明：
video:fullscreen { width: 100vw; }
video::-webkit-full-screen { width: 100vw; }
video::-moz-fullscreen { width: 100vw; }
注意细节：
-
::-webkit-full-screen是双冒号 + 两个连字符（不是三个），full-screen中间是短横线 -
::-moz-fullscreen中moz小写，且是单个短横线 - 别混用：
video:-webkit-full-screen（单冒号）或video::-webkit-full-screen（三冒号）都是语法错误 -
-ms-fullscreen已可忽略（旧 Edge 已淘汰）
退出全屏后样式不会自动还原
:fullscreen 是单向覆盖，不是状态开关。它只负责“进全屏时加样式”，不管“出全屏时删样式”。如果你只写了 .player:fullscreen { padding: 0; }，退出后 padding 依然是 0，后续布局可能错乱。
正确做法：
- 先定义基础样式，比如
.player { padding: 20px; } - 再用
:fullscreen做增量调整，如.player:fullscreen { padding: 0; font-size: 1.8rem; } - 需要动态响应进出，得靠
fullscreenchange事件配合document.fullscreenElement判断，比如加/删 class 或切换内联style - 别依赖
:fullscreen控制关键布局属性（如position、z-index），容易在退出后残留副作用
iOS Safari 和部分 WebView 根本不认 :fullscreen
iOS Safari 完全不支持标准 :fullscreen 伪类（截至 2026 年 9 月）。它只识别私有前缀 ::-webkit-full-screen，且仅在极少数场景下有限触发；更常见的是系统接管全屏层，你的 CSS 几乎全部失效。
实操建议：
- 不要指望
:fullscreen在 iOS 上控制video元素的宽高或背景色 - 必须用
fullscreenchange事件监听 + 手动切换 class 来模拟样式变更 - 对移动端视频，优先用
webkit-playsinline属性配合内联播放器 UI，而非强求原生全屏样式 - 所有依赖
:fullscreen的视觉逻辑，都得有降级 fallback（比如默认始终显示退出按钮）
requestFullscreen() 后，都要立刻用 document.fullscreenElement 确认目标是谁——它变了，CSS 选择器就得跟着变，否则整套机制就静默失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
