:fullscreen伪类仅在元素真正进入原生全屏时生效，需满足document.fullscreenElement精确匹配、前缀齐全、退出后样式不自动还原三条件；验证方式是检查document.fullscreenElement值并确保requestFullscreen()在用户手势同步上下文中调用。
:fullscreen 伪类不是“一写就生效”的快捷样式开关，它只在元素**真正进入原生全屏状态**时才匹配，且必须满足三个硬条件：选择器精确对应 document.fullscreenElement、浏览器前缀一个不漏、退出后样式不会自动还原。
怎么确认 :fullscreen 真的在起作用？
别猜，直接看浏览器当前全屏的是谁：document.fullscreenElement 的返回值就是你 CSS 里该写的主体。比如控制台输出 <video id="main">，那有效选择器只能是 #main:fullscreen 或 video:fullscreen，而不是 .player:fullscreen（除非那个 <video> 确实有 player 这个 class）。
- 调用
requestFullscreen()后立刻执行console.log(document.fullscreenElement)，输出为null就说明根本没进全屏 - 常见静默失败原因：JS 调用不在用户手势（如
click）同步上下文中，比如包在setTimeout、Promise.then或fetch().then()里 - iframe 场景下必须带
allow="fullscreen"属性，且同源；页面未聚焦也会失败
:fullscreen 选择器怎么写才不被浏览器忽略？
:fullscreen 必须绑定到**具体可被全屏的元素**，不能泛写。浏览器几乎从不把 body 或普通 div 全屏，所以 body:fullscreen、div:fullscreen 这类规则会被直接跳过。
- 正确写法示例：
video:fullscreen、#player:fullscreen、.modal:fullscreen - 错误写法：
:fullscreen（无主体）、.player:fullscreen（但目标元素没有playerclass）、section:fullscreen（section很少被 requestFullscreen() 直接调用） - 元素本身有
display: none或visibility: hidden，进全屏后照样不可见——先确保它原本可见
浏览器兼容写法为什么总失效？
现代浏览器（Chrome 65+、Firefox 64+、Safari 15.4+）支持标准 :fullscreen，但旧版 Safari 和 Firefox 仍依赖私有前缀，且拼写错一个字符（大小写、连字符数量、冒号数量）整条规则就失效。
- 必须并列书写，不能用逗号混写不同语法：
video:fullscreen, video::-webkit-full-screen是错的，会整组被忽略 - 正确三段式（顺序无关，但缺一不可）：
video:fullscreen { ... }video::-webkit-full-screen { ... }video::-moz-fullscreen { ... } - 注意细节：
::-webkit-full-screen是双冒号 + 两个连字符，full-screen小写；::-moz-fullscreen中moz全小写，中间一个短横线
子元素样式和退出后残留怎么处理？
:fullscreen 只作用于被全屏的那个元素自身，它的子节点完全不受影响。而且退出全屏后，所有通过 :fullscreen 设置的样式**不会自动还原**——这是设计行为，不是 bug。
立即学习“前端免费学习笔记（深入）”；
- 要改子元素（比如控制栏、标题），必须显式组合：
video:fullscreen .controls，不能写.controls:fullscreen - 避免只定义
:fullscreen样式而不设基础样式。推荐写法：先写默认态（如.controls { font-size: 1rem; }），再用video:fullscreen .controls { font-size: 1.5rem; }增量调整 - 移动端 iOS Safari 不支持标准
:fullscreen，只认::-webkit-full-screen，且其视频全屏是系统级渲染层，CSS 控制力极弱，得靠fullscreenchange事件动态加 class 或内联 style 补救
:fullscreen 规则，都隐含着对 JS 全屏流程是否成功的强依赖；而浏览器对这个流程的限制非常严格，且失败时往往不报错、不提示，只默默让 CSS 失效。 
