:picture-in-picture-controls伪类不作用于画中画窗口控件，仅为主页面处于PiP模式的元素添加状态标记，用于调整其自身样式；真正可用的是:picture-in-picture伪类，且需确保视频已加载元数据、CSS正确加载、选择器权重足够、结构匹配。
picture-in-picture-controls 伪类根本不会作用于画中画窗口
浏览器不允许你用 CSS 直接样式化画中画（PiP）窗口里的控件——它不属于网页 DOM，没有可选中的按钮、进度条或关闭图标。所谓 :picture-in-picture-controls 并不是给 PiP 小窗加样式的钩子，而是个被严重误解的伪类：它只在主页面中，当视频元素**处于 PiP 模式时**，为该 <video></video> 元素本身添加一个状态标记，方便你临时隐藏/调整主页面里原生控制栏的显示逻辑。
常见错误现象：
- 写了
video:picture-in-picture-controls { display: none; }，但 PiP 窗口控件纹丝不动 - DevTools 的 Styles 面板里压根不显示这条规则，甚至搜不到
picture-in-picture-controls - Chrome 120+ 和 Safari 17.4+ 对该伪类支持极弱，Firefox 完全不支持
真正生效的 PiP 样式只能作用于主页面 video 元素
你能控制的，仅限于触发 PiP 前后，主页面中那个 <video></video> 元素自身的外观。比如用户点进 PiP 后，你想把主页面的播放器缩成一个迷你占位符：
video {
transition: opacity 0.2s;
}
video:picture-in-picture {
opacity: 0.3;
height: 48px;
}
注意三点：
-
:picture-in-picture（无-controls）才是标准伪类，表示该<video></video>当前正处在 PiP 模式 - 它只影响主页面 DOM 中的
<video></video>，不影响 PiP 窗口本身 - 必须确保
<video></video>已加载元数据（loadedmetadata事件后），否则伪类不会激活
路径、加载、选择器三重失效常被一起忽略
即使你写对了 :picture-in-picture，也常因基础链路断裂而“看似没生效”：
- CSS 文件未加载：检查 Network 面板中你的 CSS 是否返回 200；
rel="stylesheet"拼错成rel="sytleSheet"或rel="css"会导致整个文件静默丢弃 - 选择器权重不够：如果框架（如 Bootstrap）或内联样式设置了
height: auto !important，你的video:picture-in-picture { height: 48px; }就会被覆盖 - HTML 结构不匹配：伪类只作用于
<video></video>元素本身，若你写成.player video:picture-in-picture却实际结构是<div class="player"><div><video></video></div></div>，空格导致后代选择器失效
想真正定制 PiP 控件？只能放弃原生，手写 UI
所有浏览器都强制隔离 PiP 窗口，你无法注入 HTML、绑定事件、修改尺寸或监听拖动。唯一可靠路径是：
- 禁用原生 PiP 按钮（
disablePictureInPicture属性） - 用 JS 调用
video.requestPictureInPicture()和document.exitPictureInPicture()控制状态 - 在主页面构建一套完全自定义的悬浮控制栏（含播放/暂停、音量、退出 PiP 按钮），通过
document.pictureInPictureElement实时判断状态并切换显隐 - 注意 iOS Safari 要求
video.webkitSupportsPresentationMode('picture-in-picture')返回 true 才能调用
PiP 不是浮动 div，它是独立窗口——这个边界比大多数开发者预想的更硬。试图用 CSS “美化小窗”，本质是在和浏览器安全模型对抗。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
