HTML中使用CSS的:fullscreen伪类为全屏元素设置专用样式-html教程-PHP中文网

根本原因是:fullscreen伪类仅对实际调用requestfullscreen()的dom节点生效，且需匹配其真实class/标签名；必须写全浏览器前缀，ios safari完全不支持该伪类，须用事件监听替代。

html中使用css的:fullscreen伪类为全屏元素设置专用样式

为什么写了 `.player:fullscreen` 却没反应

根本原因不是 CSS 写错了，而是浏览器压根没把那个元素当成全屏目标——:fullscreen 只对真正调用了 requestFullscreen() 的那个 DOM 节点生效，不认 class 名是否“看起来像”，只认实际调用时的元素身份。

JS 里对 document.getElementById('video-wrap') 调用了 requestFullscreen()，但 CSS 写的是 .player:fullscreen，而该元素没有 player 这个 class → 样式被忽略
写了 body:fullscreen 或 div:fullscreen → body 几乎从不进全屏，现代浏览器直接跳过整条规则
元素本身有 display: none 或 visibility: hidden → 进全屏后照样不可见，伪类生效了也白搭
用 console.log(document.fullscreenElement) 一看，返回的是 <video id="main-video"></video>，但你 CSS 写的是 .video-player:fullscreen → ID 和 class 不匹配，选不到

`:fullscreen` 的浏览器前缀必须全部写上

Chrome 71 前、Firefox 64 前、Safari 15.4 前都不支持无前缀的 :fullscreen。漏掉任一版本，对应浏览器就完全失效，而且不会报错、不会警告，只是静默不生效。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

标准写法：video:fullscreen { width: 100vw; }
WebKit 版本（旧 Chrome/Safari）：video::-webkit-full-screen { width: 100vw; }（注意是双冒号 + 两个连字符，不是三个）
Mozilla 版本（旧 Firefox）：video::-moz-fullscreen { width: 100vw; }（moz 小写，不是 Moz）
不要混用：video:-webkit-full-screen（单冒号）或 video::-webkit-full-screen（三冒号）都是语法错误
没必要写 -ms-fullscreen，IE/旧 Edge 已基本可忽略

退出全屏后样式不会自动还原

:fullscreen 是单向覆盖，不是状态开关。它只负责“进全屏时加样式”，不管“出全屏时删样式”。如果你只写了 .player:fullscreen { padding: 0; }，退出后 padding 依然是 0，后续布局可能错乱。

正确做法：先定义基础样式，比如 .player { padding: 20px; }，再用 :fullscreen 做增量调整
需要动态响应进出，得靠 fullscreenchange 事件配合 document.fullscreenElement 判断，比如加/删 class 或切换内联 style
别依赖 :fullscreen 控制关键布局属性（如 position、z-index），容易在退出后残留副作用

iOS Safari 和部分 WebView 根本不认 `:fullscreen`

iOS Safari 完全不支持标准 :fullscreen，也不支持 ::-webkit-full-screen。它只认视频元素自己的 webkitEnterFullscreen() 方法，且该方法不触发 :fullscreen 伪类。

不能把核心功能（比如关闭按钮显示/隐藏）绑在 :fullscreen 上，必须用 fullscreenchange 事件 + document.fullscreenElement 实时判断
对 iOS，建议降级为监听 webkitbeginfullscreen / webkitendfullscreen 事件（仅 video 元素）
Android WebView 行为不统一，有些版本阉割了 :fullscreen 支持，务必做特征检测：if ('fullscreenElement' in document)

真实项目里最容易被忽略的，是 requestFullscreen() 的异步性——调用后不能立刻读 document.fullscreenElement，必须等 fullscreenchange 事件触发才可靠。还有就是，::backdrop 虽然能设背景遮罩，但它默认透明，且不继承 z-index，想盖住内容得靠子元素提升层级，而不是给 backdrop 加 z-index。