:fullscreen伪类仅对调用requestfullscreen()的元素生效，常见失效原因包括选择器不匹配、缺少浏览器前缀、元素隐藏、语法错误及ios/安卓webview兼容性限制。
:fullscreen 只对调用 requestFullscreen() 的那个元素生效，不是“全屏时所有东西都变”，也不是 F11 全屏的响应机制。
为什么写了 .player:fullscreen 却没反应
常见原因就几个：
- JS 调用的是
document.getElementById('video-wrap').requestFullscreen()，但 CSS 写的是.player:fullscreen，而该元素根本没有player这个 class - 用了
body:fullscreen或div:fullscreen这类宽泛选择器——body几乎从不进全屏，浏览器直接跳过整条规则 - 元素本身有
display: none或visibility: hidden，进全屏后照样不可见 - 漏了浏览器前缀：Chrome 70 前、Firefox 63 前、Safari 15.4 前都不认无前缀的
:fullscreen
必须并列声明标准 + 前缀版本
现代写法不是“选一个”，而是全部写上，顺序无关，但缺一不可：
video:fullscreen { width: 100vw; height: 100vh; }
video::-webkit-full-screen { width: 100vw; height: 100vh; }
video::-moz-fullscreen { width: 100vw; height: 100vh; }
/* 注意：-ms-fullscreen 已可忽略；::backdrop 是另一套机制，不混用 */
关键细节：
-
::-webkit-full-screen是双冒号 + 两个连字符（不是三个），::-moz-fullscreen中moz小写 - 不要写
video:-webkit-full-screen（单冒号）或video::-webkit-full-screen（三冒号），语法错误 - 如果只针对视频，用
video:fullscreen比.video-player:fullscreen更稳——标签名比 class 更难被意外覆盖
退出全屏后样式不会自动还原
:fullscreen 是单向覆盖，不是状态开关。比如你只写：
.player:fullscreen { padding: 0; }
退出后 padding 依然是 0，页面布局可能错乱。
正确做法是先定义基础样式，再用 :fullscreen 做增量调整：
.player { padding: 20px; }
.player:fullscreen { padding: 0; }
更复杂场景建议配合事件控制：
- 监听
fullscreenchange（不是fullscreenchanged） - 在回调里读
document.fullscreenElement判断是否真进了全屏 - 用
classList切换 body 级 class，避免样式残留
iOS Safari 和部分安卓 WebView 不支持 :fullscreen
这不是配置问题，是原生限制。Safari 15.4+ 才开始支持标准 :fullscreen，且仅限 video 和 iframe；很多安卓 WebView 根本没实现该伪类。
实操中必须做特征检测：
if ('fullscreenElement' in document) {
// 可以用 :fullscreen
} else {
// 回退到 JS 控制 class + media query 模拟全屏尺寸
}
真正关键的点在于：别把 :fullscreen 当成“只要写了就能用”的通用方案，它本质是个窄口径、高依赖、需兜底的样式钩子。最易被忽略的是——你写的那条 CSS 规则，根本没匹配到实际进入全屏的那个 DOM 节点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
