怎么在CSS中通过:fullscreen伪类自定义全屏元素样式-css教程-PHP中文网

:fullscreen 伪类仅作用于调用 requestfullscreen() 的实际 dom 元素，需严格匹配 document.fullscreenelement；必须用标准/带前缀的单元素选择器并列书写，子元素样式须显式组合，且退出后样式不自动还原。

怎么在css中通过:fullscreen伪类自定义全屏元素样式

写了 :fullscreen 样式却没反应，90% 的情况不是 CSS 写错了，而是 JS 没真正进全屏，或选择器根本没匹配到 document.fullscreenElement。

为什么 `.player:fullscreen` 一直不生效？

浏览器只对调用 requestFullscreen() 的那个 DOM 节点应用 :fullscreen，不看 class 名是否“像”，只认实际身份。常见错误包括：

JS 对 document.getElementById('video') 调用了全屏，但 CSS 写的是 .player:fullscreen，而该元素没有 player 这个 class
写了 body:fullscreen 或 div:fullscreen —— 浏览器几乎从不把 body 或通用 div 全屏，整条规则被静默忽略
元素在进全屏前是 display: none 或 visibility: hidden，全屏后依然不可见

实操建议：点击触发按钮后，立刻执行 console.log(document.fullscreenElement)，输出结果就是你该写的选择器主体 —— 比如返回 <video id="main"></video>，那就必须用 #main:fullscreen。

`:fullscreen` 的浏览器兼容写法必须并列、不能混用

现代浏览器（Chrome 65+、Firefox 64+、Safari 15.4+）支持标准 :fullscreen，但旧版 Safari 和 Firefox 仍需前缀，且拼写错一个字符就失效：

video:fullscreen —— 单冒号，无连字符，标准写法
video::-webkit-full-screen —— 双冒号 + 两个连字符，full-screen 小写，不是 fullscreen 或 Full-Screen
video::-moz-fullscreen —— 双冒号，moz 全小写，fullscreen 中间是单短横线

别用逗号连写多个版本（如 video:fullscreen, video::-webkit-full-screen），会整组失效；也别混用单/双冒号或大小写。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

子元素样式必须显式组合，`:fullscreen` 不继承

:fullscreen 只作用于被全屏的元素自身，它的子节点完全不受影响。想调整控制栏、标题或按钮，必须写完整路径：

正确：video:fullscreen .controls { margin-top: 1.5rem; }
错误：.controls:fullscreen（子元素没被全屏，伪类不匹配）
移动端 iOS Safari 的视频全屏是系统级渲染层，你写的任何 CSS（包括子元素的 margin）大概率失效，得靠 fullscreenchange 事件动态加 class 或内联 style 来兜底

注意：:fullscreen 是单向覆盖，退出后样式不会自动还原。比如只定义了 .player:fullscreen { padding: 0; }，退出后 padding 仍是 0 —— 必须先写好基础样式，再用 :fullscreen 做增量调整。

全屏状态下的 `margin` 和 `position` 很容易踩坑

Chrome 和 Safari 在某些版本中会忽略 margin 声明，尤其当目标是 <video></video>；Firefox 可能强制归零且不报错。更麻烦的是，:fullscreen 下改 position、z-index 等关键布局属性，退出后容易残留副作用，破坏原有布局。