video:fullscreen 样式不生效的主因是 requestfullscreen() 未成功触发，需确保由用户手势同步调用、iframe 含 allow="fullscreen"、页面聚焦，且 css 选择器精确匹配全屏元素并写全浏览器前缀。
video:fullscreen 样式不生效？先确认 requestFullscreen() 是否真正触发
写了 video:fullscreen { width: 100vw; } 却没反应，大概率不是 CSS 写错了，而是 JS 根本没成功进入全屏状态。浏览器对 requestFullscreen() 有严格限制：必须由用户手势（如 click）同步调用，不能包在 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 选择器必须精确匹配被全屏的 DOM 节点
:fullscreen 只对实际调用 requestFullscreen() 的那个元素生效，不认 class 名“看起来像”，只认真实 DOM 身份。比如 JS 对 document.getElementById('player') 调用了全屏，但 CSS 写的是 .player:fullscreen，而该元素没有 player 这个 class，样式就被忽略。
常见失效写法：
-
body:fullscreen或div:fullscreen——body几乎从不被全屏，浏览器直接跳过整条规则 -
:fullscreen单独使用 —— 没有绑定具体元素，现代浏览器会忽略 - 元素本身有
display: none或visibility: hidden—— 进全屏后照样不可见
正确做法：用 console.log(document.fullscreenElement) 看返回值，然后按它的标签名、ID 或 class 写选择器，例如 #player:fullscreen、video:fullscreen。
浏览器前缀必须全部写对，拼错一个字符就失效
现代浏览器虽已支持无前缀 :fullscreen，但兼容旧版仍需并列声明，且语法容错率极低。拼写错误（大小写、连字符数量、冒号数量）会导致整条规则被忽略，还不报错。
必须写对的三种形式：
-
video:fullscreen—— 标准写法，单冒号，现代浏览器支持 -
video::-webkit-full-screen—— 注意双冒号 + 两个连字符（不是三个），webkit全小写 -
video::-moz-fullscreen—— 注意双冒号 +moz全小写（不是Moz或MOZ）
错误示例：
-
video::fullscreen（双冒号）—— 是::backdrop的写法，不是:fullscreen -
video:-webkit-full-screen（单冒号）—— 语法错误 -
.player:fullscreen, .player::-webkit-full-screen—— 逗号分隔混用不同语法，整组失效
退出全屏后样式不会自动还原，得靠基础样式兜底
:fullscreen 是单向覆盖，不是状态开关。它只负责“进全屏时加样式”，不管“出全屏时删样式”。如果你只写了 .player:fullscreen { padding: 0; }，退出后 padding 依然是 0，后续布局可能错乱。
正确策略：
- 先定义基础样式：
.player { padding: 20px; font-size: 1rem; } - 再用
:fullscreen做增量调整：.player:fullscreen { padding: 0; font-size: 1.5rem; } - 子元素样式要显式组合，比如
video:fullscreen .controls，不能指望.controls自己“感知”父级全屏 - 关键布局属性（如
position、z-index）慎用!important，容易在退出后残留副作用
iOS Safari 完全不支持标准 :fullscreen，也不支持 ::-webkit-full-screen，视频类场景只能依赖 webkitEnterFullscreen() 或 fullscreenchange 事件配合 JS 控制 —— 这是最容易被忽略的兼容性断点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
