最常见原因是css选择器与实际调用requestfullscreen()的元素不匹配，须用document.fullscreenelement确认全屏节点并精确对应其标签名、id或class；同时需兼容各浏览器前缀，退出后样式不会自动还原，应先定义基础样式再用:fullscreen增量调整。
为什么写了 .player:fullscreen 却没反应
最常见原因是选择器和实际调用 requestFullscreen() 的元素不匹配。比如 JS 里对 document.getElementById('video') 调用了全屏，但 CSS 写的是 .player:fullscreen，而该元素根本没有 player 这个 class；或者你用了 body:fullscreen —— body 几乎从不进全屏，浏览器直接跳过整条规则。
必须用 document.fullscreenElement 实时确认当前全屏的是哪个节点，再比对它的标签名、ID 或 class 是否和 CSS 选择器完全一致。别猜，要查。
- 检查元素是否本身有
display: none或visibility: hidden，进全屏后照样不可见 - 确保触发是用户手势（如 click）同步调用，不能包在
setTimeout或Promise.then里 - iframe 中使用需带
allow="fullscreen"属性且同源
:fullscreen 的写法和浏览器前缀怎么配齐
现代浏览器（Chrome 65+、Firefox 64+、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; }
-
::-webkit-full-screen是双冒号 + 两个连字符（不是三个），full-screen中间是短横线 -
::-moz-fullscreen中moz小写，且是单个短横线 - 别混用：
video:-webkit-full-screen（单冒号）或video::-webkit-full-screen（三冒号）都是错的
子元素样式怎么改？:fullscreen 不继承
:fullscreen 只作用于被全屏的那个元素自身，它的子元素不会自动获得该伪类。想调整控件大小、字体或位置，必须显式写出组合选择器。
例如让全屏时视频下方的控制栏变大：
video:fullscreen .controls { font-size: 1.5rem; }
video:fullscreen .play-btn { width: 60px; height: 60px; }
- 不能只写
.controls:fullscreen—— 子元素没被全屏，伪类不匹配 - 避免用
!important强行覆盖布局属性（如position: absolute），可能破坏默认居中逻辑 - 全屏状态下 inherited 样式（如
font-size、line-height）会被重置，建议在:fullscreen块里重新声明关键值
退出全屏后样式残留怎么办
:fullscreen 是单向覆盖，不是状态开关。如果你只写了 .player:fullscreen { padding: 0; }，退出后 padding 仍是 0，UI 就乱了。
必须先定义基础样式，再用 :fullscreen 做增量调整：
.player { padding: 20px; }
.player:fullscreen { padding: 0; }
- 需要动态响应进出，优先监听
fullscreenchange事件，配合 class 切换或 JS 控制 -
::backdrop默认透明，要加背景色得显式设background，但它不支持动画，Firefox 甚至不支持 - iOS Safari 完全不支持
:fullscreen，也不能靠::-webkit-full-screen补救，必须用video.webkitEnterFullscreen()或降级方案
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
