:fullscreen伪类仅匹配调用requestFullscreen()的真实DOM元素，需确保用户手势触发、iframe带allow="fullscreen"、元素非隐藏，且CSS选择器必须与document.fullscreenElement完全一致，并补全各浏览器前缀。
:fullscreen 伪类不是“选中所有全屏元素”的通用开关，它只匹配 真正调用过 requestFullscreen() 的那个 DOM 元素本身，且必须写对选择器、补全前缀、处理退出残留 —— 否则样式根本不会应用。
为什么 .player:fullscreen 完全没反应？
最常见原因根本不是 CSS 写错了，而是浏览器压根没进全屏状态。检查三件事：
-
requestFullscreen()必须由用户手势（比如click或touchend）同步触发，不能包在setTimeout、Promise.then或任何异步回调里 - 如果目标是
iframe，必须带allow="fullscreen"属性，且需同源 - 调用后立刻执行
console.log(document.fullscreenElement)—— 如果输出是null或不是你的目标元素，说明 JS 没成功，CSS 再准也没用
另一个隐蔽坑：元素进全屏前是 display: none 或 visibility: hidden，那进全屏后照样不可见，样式再对也看不到。
:fullscreen 选择器必须精确匹配被全屏的 DOM 节点
:fullscreen 不看 class 名“像不像”，只认真实 DOM 身份。比如你 JS 对 <video id="v1"></video> 调用了 requestFullscreen()，但 CSS 写的是 .player:fullscreen，而该 <video></video> 根本没有 player 这个 class，整条规则就被浏览器忽略。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
body:fullscreen、div:fullscreen——body几乎从不被全屏，现代浏览器直接跳过 - 错误写法：
:fullscreen单独使用 —— 没绑定具体元素，无效 - 正确做法：按
document.fullscreenElement的返回值来写，比如它是<video id="v1"></video>，就该用#v1:fullscreen或video:fullscreen
浏览器前缀一个都不能少，拼错就失效
Chrome 65+、Firefox 64+、Safari 15.4+ 支持标准 :fullscreen，但旧版仍需并列声明前缀版本。漏掉或写错任一字符，对应浏览器就失效：
-
video:fullscreen—— 标准写法，单冒号 -
video::-webkit-full-screen—— 双冒号 + 两个连字符（-），full-screen小写，不是fullscreen或Full-Screen -
video::-moz-fullscreen——moz全小写，中间一个短横线，不是full-screen或fullscreen - 别混用：
.player:fullscreen, .player::-webkit-full-screen这种逗号分隔写法会导致整组规则被忽略
子元素样式必须显式组合，:fullscreen 不继承
:fullscreen 只作用于被全屏的那个元素自身，它的 .controls、.title 等子节点完全不受影响。想调整子元素，必须写出完整路径：
- 正确：
video:fullscreen .controls { margin-top: 1.5rem; } - 错误：
.controls:fullscreen（子元素没被全屏，伪类不匹配）
移动端 iOS Safari 的视频全屏是系统级渲染层，你写的任何 CSS（包括子元素的 margin）大概率失效，得靠 fullscreenchange 事件动态加 class 或内联 style 来兜底。退出全屏后样式不会自动还原，基础样式必须先定义好，:fullscreen 只做增量调整 —— 这一点最容易被忽略。
