最常见原因是CSS选择器未匹配document.fullscreenElement，需严格对应其标签名、ID或实际存在的类名；前缀写法须拆分为独立规则，避免逗号分隔导致失效；全屏样式需显式设置display、position、box-sizing等以防止尺寸异常；退出后样式不还原属正常设计，应采用基础样式+增量覆盖策略。
为什么写了 :fullscreen 却没反应
最常见原因是选择器没对上 document.fullscreenElement。比如 JS 调用的是 document.getElementById('video-player').requestFullscreen()，但 CSS 写的是 .player:fullscreen，而那个元素根本没有 player 类，自然不匹配。
检查方法很简单：console.log(document.fullscreenElement)，看输出的 DOM 节点是什么，CSS 选择器就得严格对应它——可以是标签名（如 video:fullscreen）、ID（如 #viewer:fullscreen）、或类名（前提是该元素真有这个类）。
别写 body:fullscreen 或单独的 :fullscreen，浏览器会忽略；也别指望 display: none 的元素进全屏后突然变色——它还是不可见的。
:fullscreen 的前缀和兼容写法怎么配才不失效
现代浏览器基本支持无前缀 :fullscreen，但 Safari（尤其旧版）仍依赖 :-webkit-full-screen（注意：两个连字符，不是三个；双冒号 ::-webkit-full-screen 是错的）；Firefox 用 :-moz-full-screen（moz 全小写，不是 Moz）；:-ms-fullscreen 可以彻底忽略——旧 Edge 已淘汰。
立即学习“前端免费学习笔记（深入）”；
关键陷阱：用逗号分隔多个伪类会整组失效。比如：.player:fullscreen, .player:-webkit-full-screen { width: 100vw; } 这种写法在 Safari 下整个规则都不生效。正确做法是拆成独立规则：
.player:fullscreen { width: 100vw; }
.player:-webkit-full-screen { width: 100vw; }
.player:-moz-full-screen { width: 100vw; }
不要混用写法，也不要试图用 !important 强行覆盖——前缀规则之间没有优先级叠加逻辑。
全屏时样式“飘”或尺寸异常怎么办
根本原因不是 CSS 写错了，而是浏览器在全屏切换时重置了部分样式计算上下文。特别是当目标元素原本是 display: inline 或 position: static 时，进全屏后宽高、定位极易失控。
实操要点：
- 全屏前确保元素是
display: block或display: flex（避免 inline 行为干扰） - 显式设
position: fixed并绑定top: 0; left: 0; width: 100vw; height: 100vh——别用100%，嵌套相对定位容器里它会失效 - 在
fullscreenchange事件里手动校准z-index或transform，旋转设备后容易偏移 -
:fullscreen里必须显式声明box-sizing: border-box，WebKit 和 Gecko 对它的默认处理不一致，漏写会导致 padding/border 撑出滚动条
退出全屏后样式没还原，是 bug 吗
不是 bug，是设计如此。:fullscreen 是单向覆盖，不是状态开关。你写了 .player:fullscreen { padding: 0; background: red; }，退出后这些值不会自动回退——除非你在基础样式里定义了默认值。
正确策略是「先定义常态，再增量覆盖」：
.player {
padding: 1rem;
background: #f5f5f5;
font-size: 1rem;
}
.player:fullscreen {
padding: 0;
background: red;
font-size: 2rem;
}
还有个隐藏坑：移动端 <video> 全屏时，iOS Safari 和 Android Chrome 会启用独立渲染层，你写的大部分 CSS（包括 :fullscreen）压根不生效。这不是你能用 CSS 修复的问题，得靠 webkit-playsinline 属性 + 原生控件模拟来绕过。
