90%的:fullscreen样式无效是因为JS未成功触发全屏。需确保requestFullscreen()由用户手势同步调用、检查document.fullscreenElement、正确书写带前缀的选择器、精确匹配被全屏元素并显式设置子元素样式。
写了 :fullscreen 样式却没反应，90% 的情况是 JS 根本没成功触发全屏，而不是 CSS 写错了。
确认 requestFullscreen() 是否真正执行成功
浏览器对全屏 API 有严格限制：必须由用户手势（如 click）同步调用，不能包在 setTimeout、Promise.then、addEventListener('load') 或任何异步回调里。静默失败是常态，连错误都不抛。
- 在按钮的
onclick中直接写myVideo.requestFullscreen()，中间不加任何逻辑 - 调用后立刻检查
document.fullscreenElement—— 如果是null或不是你的目标元素，说明根本没进全屏 - 用
try/catch捕获异常：await myVideo.requestFullscreen()可能抛出NotAllowedError（非手势）、TypeError（API 不可用）或SecurityError（跨域/iframe 缺失allow="fullscreen"） - iframe 嵌套时，必须带
allow="fullscreen"属性且同源；页面未聚焦也会失败
:fullscreen 选择器必须精确匹配被全屏的元素
:fullscreen 只作用于调用 requestFullscreen() 的那个 DOM 节点自身，不会冒泡、不继承、也不作用于父级或子级。写 body:fullscreen 或 div:fullscreen 几乎总是无效，因为 body 和普通 div 很少被真正全屏。
- 先用
console.log(document.fullscreenElement)确认当前全屏的是哪个节点（比如是） - CSS 必须用对应的选择器：
#player:fullscreen、video:fullscreen或.modal:fullscreen，不能靠猜 - 如果元素本身有
display: none或visibility: hidden，进全屏后照样不可见，样式再对也看不到 - 避免用
:is()或:where()包裹:fullscreen，Safari 某些版本存在解析 bug
前缀和拼写必须严格正确，一个字符都不能错
现代浏览器（Chrome 65+、Firefox 64+、Safari 15.4+）支持无前缀 :fullscreen，但旧版 Safari 和 Firefox 仍需兼容写法。拼错一个字母、多一个冒号、少一个连字符，整条规则就失效。
- 标准写法是三者并列，用分号分隔（不是逗号）：
video:fullscreen { width: 100vw; }video::-webkit-full-screen { width: 100vw; }video::-moz-fullscreen { width: 100vw; } -
::-webkit-full-screen是双冒号 + 两个连字符（-），不是三个；::-moz-fullscreen中moz全小写，fullscreen中间是单短横线 - 别写成
video::fullscreen（双冒号）、video:-webkit-full-screen（单冒号）、.player:-moz-FullScreen（M 大写）—— 全部无效 -
::backdrop才用双冒号，:fullscreen永远是单冒号
子元素样式要显式组合，退出后不会自动还原
:fullscreen 不会传递给子元素，想改控制栏字体、按钮大小或隐藏某个按钮，必须写出完整路径。而且它只是单向覆盖，退出后样式不会回退到原始值。
- 正确写法：
video:fullscreen .controls、video:fullscreen .play-btn - 错误写法：
.controls:fullscreen（.controls没被全屏，伪类不匹配） - 基础样式必须先定义好（比如默认
.controls { font-size: 1rem; }），再用:fullscreen做增量调整（如video:fullscreen .controls { font-size: 1.5rem; }） - 某些安卓 WebView 或旧 Chrome 进全屏后会重置视口行为，导致
rem基准偏移、fixed定位异常，可在:fullscreen规则里加text-size-adjust: 100%防止文字缩放
最常被忽略的点是：你以为样式没生效，其实只是 document.fullscreenElement 是 null；你以为加了前缀就稳了，其实 ::-webkit-full-screen 少了一个 - 就整个规则作废；你以为子元素能“感知”父级全屏，结果发现 .controls 还在用默认字号——这些都不是 CSS 的问题，是匹配链断在了第一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
