:fullscreen伪类仅在元素真正进入原生全屏时生效，必须精确绑定被requestFullscreen()调用的元素；样式不生效主因是选择器不匹配、前缀错误或误以为可继承；确认方式为检查document.fullscreenElement是否为预期节点。
:fullscreen 伪类本身不“定制界面”，它只在元素真正进入原生全屏状态时生效，且必须绑定到被 requestFullscreen() 调用的那个具体元素上；写错选择器、漏前缀、或误以为它会继承/自动还原，是样式不生效的三大主因。
怎么确认 :fullscreen 是否真在起作用？
别靠“我写了就应该有效”来判断。浏览器对 :fullscreen 的匹配极其严格：
- 先执行
console.log(document.fullscreenElement)，看返回的是哪个节点（比如<video id="player"></video>） - 再检查该节点是否真有你 CSS 中写的 class 或 ID —— 比如你写了
#player:fullscreen，但实际全屏的是<div class="video-wrap">，那整条规则直接被忽略 <li>如果返回 <code>null，说明根本没进全屏：可能是requestFullscreen()被异步调用（如包在setTimeout或Promise.then里），或触发不在用户手势上下文（如自动播放后立刻调用） - JS 调用的是
document.getElementById('video').requestFullscreen()，但该元素没有player这个 class - 写了
body:fullscreen——body几乎从不被全屏，浏览器静默跳过整条规则 - 元素本身有
display: none或visibility: hidden，进全屏后照样不可见 - 用了错误前缀写法，比如
.player:-webkit-full-screen（单冒号）或.player::-webkit-full-screen（三连字符），都无效
为什么 .player:fullscreen 没反应？
最常见原因不是语法错，而是选择器和实际全屏元素不一致：
怎么写才兼容所有主流浏览器？
现代浏览器支持标准 :fullscreen，但旧版 Chrome/Safari/Firefox 仍需前缀，且必须并列声明，缺一不可：
立即学习“前端免费学习笔记（深入）”；
video:fullscreen { width: 100vw; height: 100vh; }
video::-webkit-full-screen { width: 100vw; height: 100vh; }
video::-moz-fullscreen { width: 100vw; height: 100vh; }
关键细节：
-
::-webkit-full-screen是双冒号 + 两个连字符（-），不是三个，也不是下划线 -
::-moz-fullscreen中moz全小写，不能写成Moz或MOZ - 不要用逗号合并，比如
video:fullscreen, video::-webkit-full-screen—— Safari 某些版本会整组失效 - 别用
:is()或:where()包裹，Safari 存在解析 bug
全屏后子元素样式怎么改？
:fullscreen 不继承，只作用于被全屏的那个元素自身：
- 想调大控制栏字体，得写
video:fullscreen .controls { font-size: 1.5rem; }，而不是.controls:fullscreen（子元素没被全屏，伪类不匹配） - 避免在
:fullscreen规则里强行覆盖position: absolute等布局属性，可能破坏默认居中逻辑 - 全屏状态下
font-size、line-height等 inherited 属性会被重置，建议在:fullscreen规则里显式补上text-size-adjust: 100%防止文字突然变小 - 退出全屏后样式不会自动还原 ——
:fullscreen是单向覆盖，不是开关。务必先定义好基础样式（非全屏态），再用:fullscreen做增量调整
