:fullscreen伪类仅在元素通过requestfullscreen()进入全屏时生效，需用户手势触发、作用于块级元素，且仅匹配直接全屏元素；子元素需用class控制，退出后须清理内联样式和transition。
fullscreen伪类不生效？检查是否在全屏上下文中使用
浏览器只在元素真正处于全屏状态（即通过 Element.requestFullscreen() 进入）时，才匹配 :fullscreen 伪类。直接写 CSS 却没调用 JS 全屏 API，样式必然不会触发。
常见错误现象：:fullscreen 规则写了但颜色/尺寸没变；控制台无报错，开发者工具里也看不到该规则被应用。
- 必须先调用
element.requestFullscreen()（注意不同浏览器前缀已基本废弃，无需webkitRequestFullscreen等） - 不能对
body或html直接调用 —— 大多数浏览器会拒绝，需作用于一个可渲染的块级元素（如div、video） - 用户手势触发是硬性要求：必须在
click、keydown等用户交互事件回调中调用，否则抛出TypeError: Document not active或静默失败
Chrome/Firefox/Safari 样式差异大？用 :fullscreen 做统一入口，再按需覆盖
各浏览器对全屏元素的默认样式处理不一致：Firefox 会把全屏元素置顶并拉满视口，Chrome 默认加黑边框，Safari 可能保留滚动条或忽略某些 position 声明。
正确做法是把 :fullscreen 当作「进入全屏」的统一钩子，再在里面重置关键样式：
立即学习“前端免费学习笔记（深入）”；
这款 AI 智能翻译外贸多语言保健品化妆品独立站源码是zancms专为外贸化妆品企业量身定制。它由 zancms 外贸独立站系统 基于化妆品出口企业的独特需求进行研发设计，对各类智能产品企业的出口业务拓展同样大有裨益。其具备显著的语言优势，采用英文界面呈现，且内置智能 AI 翻译功能，在获得商业授权后更可开启多语言模式，充分满足不同地区用户的语言需求，并且整个网站的架构与布局完全依照国外用户的阅读
div.fullscreen-target:fullscreen {
width: 100vw;
height: 100vh;
margin: 0;
border: none;
background: black;
object-fit: contain; /* 对 video/img 很关键 */
}-
:fullscreen在 Safari 中需配合-webkit-:fullscreen前缀（仅旧版 Safari 15.4 及之前需要，新版已支持无前缀） - 不要依赖
display: flex在:fullscreen内居中 —— 某些版本 Firefox 会忽略，改用position: absolute+inset: 0 - 字体大小缩放问题：iOS Safari 全屏后可能放大文本，加
text-size-adjust: none抑制
想让子元素也响应全屏状态？别嵌套 :fullscreen，用属性选择器或 JS 切换 class
:fullscreen 只匹配**直接进入全屏的那个元素**，它的子元素不会自动获得该伪类。试图写 div:fullscreen span 是无效的 —— 浏览器根本不匹配。
真实需求往往是「全屏时，整个播放器区域隐藏控制栏、放大视频」，这时得换思路：
- 在调用
requestFullscreen()后，同步给父容器加 class，比如player--is-fullscreen - 或者监听
fullscreenchange事件，在 document 上判断document.fullscreenElement是否为你的目标元素，再切换 class - 避免用
:fullscreen控制子组件显隐，CSS 里写.player--is-fullscreen .controls { display: none; }更可靠
退出全屏后样式没恢复？记得清理内联样式和过渡残留
全屏退出时，浏览器会自动移除 :fullscreen 匹配，但如果你在全屏状态下通过 JS 给元素加了 style.width = '100vw' 这类内联样式，退出后它还在，导致布局错乱。
还有个隐蔽坑：用 transition 动画进/出全屏，退出瞬间若未清除 transition 属性，可能卡在中间态或触发意外重绘。
- 监听
fullscreenchange事件，在document.fullscreenElement === null时，手动清空关键内联样式：el.style.width = ''、el.style.height = '' - 全屏相关 transition 建议写在
:fullscreen规则内，而不是基础选择器里，避免退出后仍生效 - 部分安卓 WebView（如微信内置）退出全屏后
document.fullscreenElement延迟归 null，可用setTimeout(..., 0)做兜底检测
全屏样式看似简单，但跨浏览器行为差异、JS/CSS 协同时机、退出状态清理这三点，最容易漏掉。尤其是 document.fullscreenElement 的存在与否，得在每个关键路径里显式判断，不能靠伪类自动推导。
