怎么利用CSS伪类:fullscreen定制全屏播放器界面？-css教程-PHP中文网

:fullscreen伪类仅在元素真正进入原生全屏时生效，必须精确绑定被requestFullscreen()调用的元素；样式不生效主因是选择器不匹配、前缀错误或误以为可继承；确认方式为检查document.fullscreenElement是否为预期节点。

怎么利用css伪类:fullscreen定制全屏播放器界面？

:fullscreen 伪类本身不“定制界面”，它只在元素真正进入原生全屏状态时生效，且必须绑定到被 requestFullscreen() 调用的那个具体元素上；写错选择器、漏前缀、或误以为它会继承/自动还原，是样式不生效的三大主因。

怎么确认 :fullscreen 是否真在起作用？

别靠“我写了就应该有效”来判断。浏览器对 :fullscreen 的匹配极其严格：

先执行 console.log(document.fullscreenElement)，看返回的是哪个节点（比如）
再检查该节点是否真有你 CSS 中写的 class 或 ID —— 比如你写了 #player:fullscreen，但实际全屏的是 ，那整条规则直接被忽略
如果返回 null，说明根本没进全屏：可能是 requestFullscreen() 被异步调用（如包在 setTimeout 或 Promise.then 里），或触发不在用户手势上下文（如自动播放后立刻调用）


为什么 .player:fullscreen 没反应？
最常见原因不是语法错，而是选择器和实际全屏元素不一致：

JS 调用的是 document.getElementById('video').requestFullscreen()，但该元素没有 player 这个 class
写了 body:fullscreen —— body 几乎从不被全屏，浏览器静默跳过整条规则
元素本身有 display: none 或 visibility: hidden，进全屏后照样不可见
用了错误前缀写法，比如 .player:-webkit-full-screen（单冒号）或 .player::-webkit-full-screen（三连字符），都无效

怎么写才兼容所有主流浏览器？
现代浏览器支持标准 :fullscreen，但旧版 Chrome/Safari/Firefox 仍需前缀，且必须并列声明，缺一不可：

											
												
												
													CSS工具箱(专业版)
													全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。
												
												下载
												
											
										
video:fullscreen { width: 100vw; height: 100vh; }
video::-webkit-full-screen { width: 100vw; height: 100vh; }
video::-moz-fullscreen { width: 100vw; height: 100vh; }
关键细节：


::-webkit-full-screen 是双冒号 + 两个连字符（-），不是三个，也不是下划线

::-moz-fullscreen 中 moz 全小写，不能写成 Moz 或 MOZ

不要用逗号合并，比如 video:fullscreen, video::-webkit-full-screen —— Safari 某些版本会整组失效
别用 :is() 或 :where() 包裹，Safari 存在解析 bug

全屏后子元素样式怎么改？
:fullscreen 不继承，只作用于被全屏的那个元素自身：

想调大控制栏字体，得写 video:fullscreen .controls { font-size: 1.5rem; }，而不是 .controls:fullscreen（子元素没被全屏，伪类不匹配）
避免在 :fullscreen 规则里强行覆盖 position: absolute 等布局属性，可能破坏默认居中逻辑
全屏状态下 font-size、line-height 等 inherited 属性会被重置，建议在 :fullscreen 规则里显式补上 text-size-adjust: 100% 防止文字突然变小
退出全屏后样式不会自动还原 —— :fullscreen 是单向覆盖，不是开关。务必先定义好基础样式（非全屏态），再用 :fullscreen 做增量调整