:fullscreen伪类仅在JS调用requestFullscreen()且元素真正进入全屏时生效，需确保CSS选择器与document.fullscreenElement完全匹配，如.video:fullscreen不生效常因触发全屏的元素无video类；必须绑定具体元素（如video:fullscreen），不可单独使用；现代浏览器支持无前缀，旧版需加-webkit-、-moz-前缀；退出全屏后样式不会自动还原，应先定义基础样式再用:fullscreen增量调整；全屏需用户手势触发且iframe需allow="fullscreen"。
:fullscreen 伪类本身不能“让元素变色”，它只在元素真正进入原生全屏状态时才匹配生效——前提是 JS 已调用 element.requestFullscreen()，且该元素是被全屏的那个目标。
为什么写了 .video:fullscreen { background: red; } 却没反应
最常见原因是选择器和实际触发全屏的元素不一致。比如：document.getElementById('player').requestFullscreen() 调用的是 #player 元素，但 CSS 写的是 .video:fullscreen，而 #player 并没有 video 类，自然不匹配。
- 检查
document.fullscreenElement的值，确认当前全屏的是哪个 DOM 节点 - 确保 CSS 中的选择器精确对应那个节点（ID、类名、标签名都得对）
- 避免写
:fullscreen（无前缀主体）或body:fullscreen——body几乎从不被全屏，浏览器会忽略这类规则 - 如果元素有
display: none或visibility: hidden，进全屏后依然不可见，变色也看不到
:fullscreen 必须搭配具体元素选择器，不能单独使用
标准写法不是 :fullscreen { color: blue; }，而是必须绑定到某个可被全屏的元素上，比如 video:fullscreen、.modal:fullscreen、#viewer:fullscreen。
-
video:fullscreen只作用于被requestFullscreen()调用的元素本身，不影响其子元素（如.controls）——要改子元素样式，得写成video:fullscreen .controls - 现代浏览器（Chrome 65+、Firefox 64+、Edge 79+、Safari 15.4+）已统一支持无前缀
:fullscreen，但若需兼容旧版 Safari 或 Firefox，仍需并列写出：.player:-webkit-full-screen、.player:-moz-full-screen、.player:fullscreen - 注意前缀拼写：
::-webkit-full-screen是双冒号 + 两个连字符，不是三个；:-moz-full-screen中moz小写
全屏退出后样式不会自动还原，得靠设计策略
:fullscreen 是单向覆盖，不是状态切换开关。比如你设了 .player:fullscreen { padding: 0; font-size: 2rem; }，退出后这些值不会回退到原来值，除非你显式定义非全屏状态的默认样式。
- 推荐写法：先写基础样式（非全屏态），再用
:fullscreen做增量调整.player { padding: 1rem; font-size: 1rem; }<br>.player:fullscreen { padding: 0; font-size: 2rem; } - 不要依赖
!important强行覆盖布局属性（如position、top），容易破坏全屏默认居中逻辑 - 如需更精细控制（比如退出时重置动画、恢复滚动等），应监听
document.onfullscreenchange事件，动态增删 class，而非只靠 CSS
真正容易被忽略的点是：全屏样式生效的前提是用户手势触发（click/keydown），且 iframe 需带 allow="fullscreen" 属性；否则 requestFullscreen() 会被静默拒绝，:fullscreen 根本没机会匹配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
