:fullscreen伪类需绑定具体全屏元素，关键查document.fullscreenelement；无效写法包括单独:fullscreen、body:fullscreen等；兼容旧版需加-webkit-、-moz-、-ms-前缀。
:fullscreen 伪类本身不生效，大概率不是选择器写错了，而是 requestFullscreen() 根本没成功触发，或者 CSS 选择器和实际被全屏的元素对不上。
确认 document.fullscreenElement 是谁
这是最关键的一步。别猜，要查。调用 requestFullscreen() 后立刻执行：
console.log(document.fullscreenElement);
返回值可能是 null（没进全屏）、<video id="main"></video>、<div class="player"> 等——CSS 必须严格按这个节点的标签名、ID 或 class 来写。
<ul><li>如果输出是 <code><div id="viewer">，就得写 <code>#viewer:fullscreen，不能写 .player:fullscreen
<video></video>，且它没有 class="video"，那 .video:fullscreen 就永远不匹配display: none 或 visibility: hidden，进全屏后照样不可见，样式“生效”也看不到必须绑定具体元素，不能单独用 :fullscreen
:fullscreen 不是全局开关，它必须和一个可被全屏的元素选择器组合使用。标准写法只有这几种：
-
video:fullscreen（针对<video></video>元素） -
#player:fullscreen（针对id="player"的元素） -
.modal:fullscreen（针对有class="modal"的元素）
以下写法全部无效：
-
:fullscreen { ... }（缺少主体选择器） -
body:fullscreen（body几乎从不被全屏，浏览器直接跳过） -
div:fullscreen（太宽泛，除非你真对某个<div> 调用了 <code>requestFullscreen()）兼容旧浏览器必须并列声明三套前缀
现代浏览器（Chrome 65+、Firefox 64+、Safari 15.4+）支持
video:fullscreen，但若需覆盖 Safari 12–15.3 或 Firefoxvideo:fullscreen { width: 100vw; height: 100vh; }<br>video::-webkit-full-screen { width: 100vw; height: 100vh; }<br>video::-moz-fullscreen { width: 100vw; height: 100vh; }注意细节：
-
::-webkit-full-screen是双冒号 + 两个连字符，不是:-webkit-full-screen（单冒号）或:::-webkit-full-screen（三冒号） -
::-moz-fullscreen中moz全小写，不是Moz或MOZ - 别用逗号合并写法，比如
video:fullscreen, video::-webkit-full-screen——整条规则在部分浏览器里会失效
子元素样式要显式组合，
:fullscreen不继承:fullscreen只作用于被全屏的那个 DOM 节点自身。它的子元素不会自动获得该状态，想改控件大小、字体、位置，必须写出完整路径：- ✅ 正确：
video:fullscreen .controls { font-size: 1.5rem; } - ❌ 错误：
.controls:fullscreen { ... }（.controls没被全屏，伪类不匹配） - 避免滥用
!important覆盖position: absolute类属性，可能破坏浏览器默认的全屏居中逻辑 - 全屏状态下 inherited 样式（如
font-size、line-height）会被重置，建议在:fullscreen块里重新声明关键值
真正容易被忽略的是：退出全屏后，
:fullscreen定义的样式不会自动还原。如果你只写了.player:fullscreen { padding: 0; }，退出后 padding 依然是 0——得靠基础样式兜底，再用:fullscreen做增量调整。 -
