css .player:fullscreen 无反应主因是 requestfullscreen() 未成功触发，需确保用户手势同步调用、iframe 含 allow="fullscreen"、页面聚焦且同域；伪类仅作用于被全屏元素自身，且必须精确匹配其标签名、id 或 class，并正确声明标准及前缀语法。
为什么写了 .player:fullscreen 却没反应
大概率不是 CSS 写错了，而是 requestFullscreen() 根本没成功触发。浏览器对全屏 API 有硬性限制：必须由用户手势（如 click、keydown）同步调用，不能包在 setTimeout、Promise.then 或异步回调里；iframe 嵌套时需带 allow="fullscreen" 属性；页面未聚焦或跨域也会静默失败。
实操建议：
- 按钮的
onclick中直接调用myVideo.requestFullscreen()，中间不加任何异步逻辑 - 调用后立刻检查
document.fullscreenElement—— 如果是null或不是你的目标元素，说明没进全屏 - 捕获异常：
try { await myVideo.requestFullscreen(); } catch (e) { console.error(e); }，常见错误包括NotAllowedError（非手势触发）或TypeError（API 不可用）
:fullscreen 选择器必须精确匹配被全屏的元素
:fullscreen 只作用于调用 requestFullscreen() 的那个 DOM 节点自身，不会继承，也不匹配父容器或 body。写 body:fullscreen 或 div:fullscreen 几乎总是无效，因为浏览器几乎从不把 body 或通用 div 全屏。
常见错误场景：
- JS 对
#player调用全屏，但 CSS 写的是.video-player:fullscreen，而该元素没有video-player这个 class - 用了
video:fullscreen，但实际调用的是document.getElementById('wrapper').requestFullscreen() - 元素本身有
display: none或visibility: hidden，进全屏后依然不可见
正确做法：先确认 document.fullscreenElement 是什么，再按它的标签名、ID 或 class 写选择器 —— 比如它是 <div id="viewer">，就该写 <code>#viewer:fullscreen。
兼容写法必须并列声明，且拼写不能错一个字符
现代浏览器（Chrome 65+、Firefox 64+、Edge 79+、Safari 15.4+）已支持无前缀 :fullscreen，但若要兼容旧版，必须同时声明标准版和前缀版，且语法必须严格：
-
video:fullscreen—— 单冒号，无连字符 -
video::-webkit-full-screen—— 双冒号，两个连字符，full-screen小写，不是fullscreen或Full-Screen -
video::-moz-full-screen—— 双冒号，moz全小写，full-screen小写 - 不要混用：比如
video:fullscreen, video::-webkit-full-screen用逗号连写会整组失效
正确示例：
video:fullscreen,
video::-webkit-full-screen,
video::-moz-full-screen {
width: 100vw;
height: 100vh;
object-fit: contain;
}
退出全屏后样式不会自动还原
:fullscreen 是单向覆盖，不是状态开关。如果你只写了 .player:fullscreen { padding: 0; }，退出后 padding 仍为 0，布局可能错乱。
必须先定义基础样式，再用 :fullscreen 做增量调整：
- ✅ 正确：
.player { padding: 20px; }+.player:fullscreen { padding: 0; } - ❌ 错误：只写
.player:fullscreen { padding: 0; }，无默认值兜底 - 子元素要改样式，得显式组合，比如
.player:fullscreen .controls { font-size: 1.5rem; }，不能指望.controls自己“感知”父级全屏
真正容易被忽略的点是：iOS Safari 完全不支持 :fullscreen，Android WebView 也可能阉割；关键逻辑必须靠 fullscreenchange 事件 + document.fullscreenElement 判断，不能只信 CSS。
