:fullscreen伪类仅作用于调用requestFullscreen()的实际元素，须用精确ID或class选择器匹配，且需同时声明标准及-webkit/-moz前缀版本，并配合基础样式与fullscreenchange事件确保样式正确切换。
:fullscreen 选择器必须绑定到实际调用 requestFullscreen() 的元素
直接写 :fullscreen 或 body:fullscreen 基本无效——浏览器只对真正进入全屏状态的那个 DOM 节点应用该伪类，且必须用精确匹配的选择器。比如你对 document.getElementById('player') 调用了 requestFullscreen()，CSS 就得写 #player:fullscreen，而不是 .player:fullscreen（除非它真有这个 ID）或更宽泛的 div:fullscreen。
常见错误现象：
- 写了
video:fullscreen，但实际全屏的是包裹它的<div class="video-wrapper">，样式完全不生效 - 用 class 选择器却没确认元素是否真带该 class，比如
.js-player:fullscreen但运行时 class 是动态添加的，CSS 加载早于 class 注入 - 在 Shadow DOM 内部使用
:fullscreen，而宿主元素才是调用方，伪类不会穿透
实操建议：
- 先用
console.log(document.fullscreenElement)确认当前全屏节点的 tagName 和 id/class - 优先用 ID 或带明确语义的 class（如
#main-video），避免泛化选择器 - 若全屏目标是动态生成的元素，确保 CSS 在其挂载后已就绪，或改用 JS 动态插入 style 标签
必须同时声明标准与浏览器前缀版本
截至 2026 年，:fullscreen 标准语法虽已广泛支持，但 Chrome/Edge 71 前、Firefox 64 前、Safari 15.4 前仍依赖私有前缀。漏掉任一版本，对应浏览器就会跳过整条规则。
立即学习“前端免费学习笔记（深入）”；
正确写法需并列声明：
.player:fullscreen {
width: 100vw;
height: 100vh;
}
.player:-webkit-full-screen {
width: 100vw;
height: 100vh;
}
.player:-moz-full-screen {
width: 100vw;
height: 100vh;
}
注意细节：
-
-webkit-full-screen是两个连字符，不是三个；::-webkit-full-screen（三冒号）是错的 -
-moz-full-screen中moz全小写，不是Moz或MOZ -
-ms-fullscreen已可忽略（旧 Edge 已淘汰） - 不要混用写法，比如
.player:fullscreen, .player::-webkit-full-screen—— 逗号分隔会导致整组失效
退出全屏后样式不会自动还原
:fullscreen 是单向覆盖，不是状态开关。如果你只定义了 .player:fullscreen { padding: 0; }，退出后 padding 仍为 0，因为基础样式缺失。
正确做法是「基础样式 + 增量覆盖」：
- 先写
.player { padding: 20px; } - 再写
.player:fullscreen { padding: 0; }
更灵活的方案是配合 fullscreenchange 事件切换 class：
document.addEventListener('fullscreenchange', () => {
if (document.fullscreenElement === playerEl) {
document.body.classList.add('is-fullscreen');
} else {
document.body.classList.remove('is-fullscreen');
}
});
这样既能规避 CSS 覆盖盲区，也便于控制非全屏元素（如顶部导航栏）的显隐逻辑。
移动端 Safari 和 iframe 场景要特别处理
iOS Safari 直到 15.4+ 才支持标准 :fullscreen，且对视频元素限制极严：它不响应 video.requestFullscreen() 触发的 :fullscreen，只认 video::-webkit-full-screen；而如果页面嵌在 iframe 里，还必须确保 allow="fullscreen" 属性存在，否则调用静默失败。
实操要点：
- 对 iOS 做特征检测：
if ('webkitExitFullscreen' in document)，而非仅靠 CSS - iframe 必须带
allow="fullscreen"，且同源；跨域 iframe 即使加了属性也无法触发原生全屏 - 不要依赖
:fullscreen控制视频控件尺寸——iOS 下它几乎不生效，改用video::-webkit-media-controls系列伪元素 - F11 全屏或双击视频默认全屏按钮，不会触发你写的
:fullscreen规则，因为全屏主体是document.documentElement，不是你的元素
最易被忽略的一点：所有基于 :fullscreen 的样式调整，都建立在「用户手势同步触发 requestFullscreen()」这个前提上。任何异步包装（setTimeout、Promise.then、await）都会导致调用失败，且无报错提示——这时候连 document.fullscreenElement 都读不到，更别说样式生效了。
