:fullscreen仅匹配JS调用requestFullscreen()进入原生全屏的元素，不响应F11或CSS模拟全屏；需配合fullscreenchange事件监听状态，且Safari/iOS/移动端兼容性差，不可用于关键功能。
怎么用 :fullscreen 选中全屏元素
直接写 :fullscreen 就行，但它只匹配当前处于原生全屏模式（由 Element.requestFullscreen() 触发）的元素，不是所有“看起来占满屏幕”的元素都算。比如用 CSS width: 100vw; height: 100vh 模拟的“伪全屏”，:fullscreen 完全不生效。
常见错误是以为它能捕获 F11 全屏浏览器窗口——不能。:fullscreen 只响应 JS 主动调用的全屏 API，和浏览器 UI 全屏无关。
-
:fullscreen是标准写法，现代浏览器（Chrome 65+、Firefox 64+、Safari 15.4+）已支持，无需前缀 - 旧版浏览器需用带前缀版本：
:fullscreen（标准）、:-webkit-full-screen、:-moz-fullscreen、:-ms-fullscreen，建议同时写全 - 它只能用于选择器开头或中间，不能单独用（比如
div:fullscreen✅，:fullscreen .btn❌）
:fullscreen 的样式作用范围和继承限制
一旦某个元素进入全屏，:fullscreen 会精准匹配它本身，但它的子元素不会自动获得该伪类——除非你显式写 div:fullscreen span 这样的组合选择器。
关键限制：全屏状态下，浏览器会重置大部分 inherited 样式（比如 font-size、color），但 :fullscreen 规则里声明的样式仍有效。这意味着你不能依赖父级设置的 line-height 或 margin，得在 :fullscreen 块里重新声明。
立即学习“前端免费学习笔记（深入）”；
- 全屏后 body 默认被设为
overflow: hidden，滚动条消失，但这是 UA 样式，不是你的 CSS 控制的 -
:fullscreen内无法用position: fixed实现真正固定定位（部分浏览器会降级为absolute） - 如果元素有
transform，全屏时可能触发渲染异常，建议加will-change: transform预防
监听全屏状态变化比纯 CSS 更可靠
仅靠 :fullscreen 无法知道“什么时候进/出全屏”，也无法做逻辑判断（比如记录用户行为、关闭弹窗）。必须配合 JS 事件。
真实场景中，CSS 伪类只是视觉补丁，核心状态管理得靠 JS：
- 监听
document.onfullscreenchange—— 进出全屏都会触发 - 检查
document.fullscreenElement是否为null来判断当前是否有元素全屏 - 注意事件名没有 “s”：
fullscreenchange，不是fullscreenchanged - 调用
requestFullscreen()可能被拒绝（比如非用户手势触发、iframe 无allow="fullscreen"），要 catchPromisereject
示例判断逻辑：
document.addEventListener('fullscreenchange', () => {
if (document.fullscreenElement) {
console.log('进入全屏:', document.fullscreenElement);
} else {
console.log('退出全屏');
}
});
兼容性坑：Safari 和移动端特别容易掉链子
Safari（尤其 iOS）对 :fullscreen 支持很保守：它要求元素必须是 <video></video> 或显式设置了 webkit-playsinline 的媒体元素，否则即使调用了 requestFullscreen()，伪类也不匹配。
移动端 WebView（如微信内置浏览器）基本不支持原生全屏 API，:fullscreen 彻底失效，别指望它。
- iOS Safari 中，
document.fullscreenEnabled永远是false，但<video></video>仍可触发全屏（走的是系统视频控件，不是标准 API） - Android Chrome 从 117 开始默认禁用非
<video></video>元素的全屏（需手动开启 chrome://flags/#enable-experimental-web-platform-features） - 不要用
:fullscreen做关键功能兜底，比如“全屏时才显示按钮”——用户可能根本进不去全屏
:fullscreen 看似简单，但实际生效高度依赖上下文：是否由用户操作触发、元素类型、平台、甚至当前页面是否在 iframe 里。真要用，先跑通 requestFullscreen() + fullscreenchange 这一套，再加 CSS 修饰，别倒过来。 
