最常见原因是css选择器与实际全屏元素不匹配，需用console.log(document.fullscreenelement)确认节点并比对选择器；同时注意兼容写法、移动端限制及:fullscreen不自动还原样式等特性。
为什么写了.player:fullscreen却没反应
最常见原因是 CSS 选择器和实际调用 requestFullscreen() 的元素不匹配。比如 JS 对 document.getElementById('video-wrap') 调用了全屏，但 CSS 写的是 .player:fullscreen，而该元素根本没有 player 这个 class；或者你写了 body:fullscreen——body 几乎从不被全屏，浏览器直接跳过整条规则。
必须用 console.log(document.fullscreenElement) 确认当前全屏的是哪个节点，再比对它的标签名、ID 或 class 是否和 CSS 选择器完全一致。别猜，要查。
- 元素本身有
display: none或visibility: hidden，进全屏后照样不可见 - 触发不是用户手势（如 click）同步调用，而是包在
setTimeout或Promise.then里，requestFullscreen()会静默失败 - iframe 嵌套时没加
allow="fullscreen"属性，或页面未聚焦、跨域
:fullscreen 的前缀和兼容写法怎么配才不失效
现代浏览器（Chrome 65+、Firefox 64+、Safari 15.4+）支持无前缀 :fullscreen，但旧版仍需并列声明，漏掉任一版本，对应浏览器就静默失效。
正确写法是三者独立声明，不能用逗号分隔，也不能混用语法：
video:fullscreen {
width: 100vw;
height: 100vh;
}
video::-webkit-full-screen {
width: 100vw;
height: 100vh;
}
video::-moz-fullscreen {
width: 100vw;
height: 100vh;
}
-
::-webkit-full-screen是双冒号 + 两个连字符，不是三个；::-moz-fullscreen中moz全小写 - 别写成
video::fullscreen（双冒号标准写法错误）或video:-webkit-full-screen（单冒号私有写法错误） -
-ms-fullscreen可彻底忽略，旧 Edge 已淘汰
:fullscreen 只作用于被全屏元素自身，子元素样式要显式组合
:fullscreen 不继承，也不会“传染”给后代。想调整控制栏、字体或按钮位置，必须写完整路径，比如 video:fullscreen .controls，而不是指望 .controls 自己感知父级状态。
常见误用：
- 只写
.player:fullscreen { padding: 0; }，退出后 padding 仍是 0，布局可能错乱 - 依赖
:fullscreen控制position、z-index等关键布局属性，退出后容易残留副作用 - 在移动端 Safari 上直接用
:fullscreen——它完全不支持该伪类，得靠fullscreenchange事件 + 手动切 class
推荐策略：先定义基础样式（如 .player { padding: 1rem; }），再用 :fullscreen 做增量覆盖（如 .player:fullscreen { padding: 0; }）。
退出全屏后样式不会自动还原，必须靠设计策略兜底
:fullscreen 是单向覆盖，不是状态开关。它只负责“进全屏时加样式”，不管“出全屏时删样式”。如果你只写了 .player:fullscreen { font-size: 2rem; }，退出后字体大小不会回退。
真正可控的响应方式是监听 fullscreenchange 事件，动态增删 class 或切换内联 style：
document.addEventListener('fullscreenchange', () => {
const el = document.fullscreenElement;
if (el === document.getElementById('my-video')) {
el.classList.add('is-fullscreen');
} else {
el?.classList.remove('is-fullscreen');
}
});
复杂点在于：F11 全屏时 document.fullscreenElement 往往是 document.documentElement，不是你的视频元素；而 xgplayer 等库的 CSS 模拟全屏根本不会触发该事件——此时只能靠 JS 主动标记状态，不能只信伪类。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
