为什么CSS:picture-in-picture样式没有生效

:picture-in-picture-controls伪类不作用于画中画窗口控件，仅为主页面处于PiP模式的<video>元素添加状态标记，用于调整其自身样式；真正可用的是:picture-in-picture伪类，且需确保视频已加载元数据、CSS正确加载、选择器权重足够、结构匹配。

picture-in-picture-controls 伪类根本不会作用于画中画窗口

浏览器不允许你用 CSS 直接样式化画中画（PiP）窗口里的控件——它不属于网页 DOM，没有可选中的按钮、进度条或关闭图标。所谓 :picture-in-picture-controls 并不是给 PiP 小窗加样式的钩子，而是个被严重误解的伪类：它只在主页面中，当视频元素处于 PiP 模式时，为该 <video> 元素本身添加一个状态标记，方便你临时隐藏/调整主页面里原生控制栏的显示逻辑。

常见问题表现：

1. 写了 video:picture-in-picture-controls { display: none; }，但 PiP 窗口控件纹丝不动
2. DevTools 的 Styles 面板里压根不显示这条规则，甚至搜不到 picture-in-picture-controls
3. Chrome 120+ 和 Safari 17.4+ 对该伪类支持极弱，Firefox 完全不支持

真正生效的 PiP 样式只能作用于主页面 video 元素

你能控制的，仅限于触发 PiP 前后，主页面中那个 <video> 元素自身的外观。比如用户点进 PiP 后，你想把主页面的播放器缩成一个迷你占位符：

video {transition: opacity 0.2s;}video:picture-in-picture {opacity: 0.3;height: 48px;}

注意三点：

1. :picture-in-picture（无 -controls）才是标准伪类，表示该 <video> 当前正处在 PiP 模式
2. 它只影响主页面 DOM 中的 <video>，不影响 PiP 窗口本身
3. 必须确保 <video> 已加载元数据（loadedmetadata 事件后），否则伪类不会激活

路径、加载、选择器三重失效常被一起忽略

即使你写对了 :picture-in-picture，也常因基础链路断裂而“看似没生效”：

1. CSS 文件未加载：检查 Network 面板中你的 CSS 是否返回 200；rel="stylesheet" 拼错成 rel="sytleSheet" 或 rel="css" 会导致整个文件静默丢弃
2. 选择器权重不够：如果框架（如 Bootstrap）或内联样式设置了 height: auto !important，你的 video:picture-in-picture { height: 48px; } 就会被覆盖
3. HTML 结构不匹配：伪类只作用于 <video> 元素本身，若你写成 .player video:picture-in-picture 却实际结构是 <div class="player"><div><video></video></div></div>，空格导致后代选择器失效

想真正定制 PiP 控件？只能放弃原生，手写 UI

所有浏览器都强制隔离 PiP 窗口，你无法注入 HTML、绑定事件、修改尺寸或监听拖动。唯一可靠路径是：

1. 禁用原生 PiP 按钮（disablePictureInPicture 属性）
2. 用 JS 调用 video.requestPictureInPicture() 和 document.exitPictureInPicture() 控制状态
3. 在主页面构建一套完全自定义的悬浮控制栏（含播放/暂停、音量、退出 PiP 按钮），通过 document.pictureInPictureElement 实时判断状态并切换显隐
4. 注意 iOS Safari 要求 video.webkitSupportsPresentationMode('picture-in-picture') 返回 true 才能调用

PiP 不是浮动 div，它是独立窗口——这个边界比大多数开发者预想的更硬。试图用 CSS “美化小窗”，本质是在和浏览器安全模型对抗。