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 不可用）
.player:fullscreen 和 .player:-webkit-full-screen 拼写必须精确
前缀规则不是“差不多就行”，拼错一个字符就整个规则失效。比如 .player::-webkit-full-screen（三冒号）或 .player:-moz-FullScreen（M 大写）都会被忽略。现代浏览器虽已支持无前缀 :fullscreen，但兼容旧版仍需并列声明，且必须用逗号分隔、不能混用语法。
正确写法示例：
video:fullscreen,
video:-webkit-full-screen,
video:-moz-full-screen {
width: 100vw;
height: 100vh;
object-fit: contain;
}
注意要点：
-
-webkit-full-screen是两个连字符，不是三个；-moz-full-screen中moz全小写 - 不要写成
video::fullscreen（双冒号）——标准是单冒号:fullscreen，双冒号是::backdrop的写法 - 避免用
body:fullscreen这类宽泛选择器，body几乎从不被全屏，浏览器会跳过整条规则
:fullscreen 不继承，子元素样式要显式组合书写
:fullscreen 只作用于被调用 requestFullscreen() 的那个元素自身，它的子元素不会自动带上该伪类。想调整控件大小、隐藏按钮或放大字体，必须写完整路径，比如 video:fullscreen .controls，而不是指望 .controls 自己“感知”到父级全屏。
容易踩的坑：
- 写了
.controls { font-size: 1rem; }和:fullscreen .controls { font-size: 2rem; }—— 后者无效，因为:fullscreen没绑定主体，应改为video:fullscreen .controls - 全屏后字体变小？因为浏览器重置了 inherited 属性，
:fullscreen块内需重新声明font-size、line-height等，不能依赖父级 - 用
vh做高度基准可能出问题：全屏时浏览器 UI 隐藏，100vh可能大于实际可视区域，建议改用100dvh（现代浏览器支持）或 JS 动态读取screen.height
退出全屏后样式残留？基础样式必须前置定义
:fullscreen 是单向覆盖，不是开关。如果你只写了 .player:fullscreen { padding: 0; }，退出后 padding 依然为 0，因为没有默认值兜底。
正确做法是「先定义常态，再增量调整」：
.player {
padding: 1.5rem;
font-size: 1rem;
}
.player:fullscreen {
padding: 0;
font-size: 1.8rem;
}
更关键的是：仅靠 CSS 无法监听进出状态。需要响应式逻辑（比如关闭弹窗、暂停动画、记录行为）时，必须配合 fullscreenchange 事件和 document.fullscreenElement 判断，不能只信样式是否生效。
复杂点在于：iOS Safari 完全不支持 :fullscreen，Android WebView 也可能阉割；关键功能绝不能只靠它驱动，得用 JS + 事件兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
