:fullscreen不是自动适配全屏的魔法开关，仅对调用requestfullscreen()的真实dom元素生效，需精确选择器、补全前缀、处理退出残留，否则样式无效。
直接说结论：: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="main-video"></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 规则确实会自动失效，但如果你只定义了 .player:fullscreen { padding: 0; }，而没写基础样式 .player { padding: 1rem; }，退出后 padding 就永远是 0 —— 这不是 bug，是设计如此，得自己兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
