:fullscreen伪类仅作用于调用requestfullscreen()的实际元素，须用具体选择器如video:fullscreen；需注意浏览器前缀兼容、避免display/visibility隐藏、慎用!important，并优先拆分:is/:where规则以保障稳定性。

:fullscreen伪类的生效条件与选择器写法

:fullscreen 不是随便加个样式就能生效的——它只作用于当前真正进入全屏状态的那个元素，而且必须用正确的选择器链。浏览器不会把 :fullscreen 应用到它的子元素上，哪怕子元素在视觉上“填满屏幕”。

• 必须用具体元素选择器触发，比如 video:fullscreen、.player:fullscreen，不能只写 :fullscreen（太宽泛，多数浏览器会忽略）
• 如果用 JavaScript 调用 element.requestFullscreen()，那只有这个 element 及其后代能响应 :fullscreen 样式
• 注意浏览器前缀：旧版 Chrome/Safari 需要 ::-webkit-full-screen，Firefox 是 ::-moz-full-screen，现在主流已统一支持标准 :fullscreen，但兼容老版本时得并存

例如想让全屏时视频控件变大：

video:fullscreen .controls { font-size: 1.5rem; }

而不是写 body:fullscreen .controls——body 几乎从不进全屏。

为什么加了:fullscreen样式却没反应

常见现象是写了样式但切换全屏后毫无变化，大概率卡在这几个点：

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

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

下载

• requestFullscreen() 被调用的对象和 CSS 里写的选择器不一致，比如 JS 对 #player 调用，但 CSS 写的是 .video-container:fullscreen
• 元素本身有 display: none 或 visibility: hidden，进全屏后这些样式仍生效，导致内容不可见
• 使用了 !important 覆盖了关键属性，反而干扰了全屏下的布局流（比如强行设 position: absolute 破坏默认居中）
• 没处理退出全屏后的回退逻辑，样式残留导致后续渲染错乱（建议配合 fullscreenchange 事件重置关键状态）

与:is(:fullscreen)或:where()混用的风险

有人想简化写法，用 :is(video, .player):fullscreen 或 :where(.modal, .viewer):fullscreen，但要注意：

• :is() 和 :where() 本身不影响优先级，但容易掩盖选择器匹配失败的问题（比如其中某个类名拼错，整个组都失效却不报错）
• 在部分 Safari 版本中，:is() + :fullscreen 组合存在解析 bug，样式直接不应用
• 更稳妥的做法是拆成独立规则：

  video:fullscreen { ... }<br>.player:fullscreen { ... }

  虽然多两行，但可维护、易调试

全屏下字体/缩放/滚动的隐性冲突

全屏不是“换个容器”，而是创建了一个新的顶层渲染上下文，很多 CSS 行为会悄悄改变：

• vh 单位在移动端全屏时可能失效（Safari iOS 常把地址栏高度算进 100vh，导致溢出）
• font-size 设为 rem 时，若根字体在全屏前后被 JS 动态修改过，会出现跳变
• 默认禁止滚动，但若内容超出，又没设 overflow: hidden，用户可能意外拖动背景（尤其在 macOS 上惯性滚动明显）
• 视频全屏时，transform: scale() 类操作可能被浏览器强制重置，应优先用原生尺寸控制

事情说清了就结束。全屏样式最麻烦的从来不是怎么写，而是搞清「谁进了全屏」和「谁该响应」——这两个问题没对上，后面所有样式都是白搭。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！