为什么CSS中picture-in-picture样式没有生效及解决方法

:picture-in-picture-controls 这个伪类并不会直接作用到画中画窗口里的控件上，它更像是给主页面中处于 PiP（画中画）模式的 元素添加一个状态标识，方便开发者根据该状态调整视频自身样式；真正可能生效的是 :picture-in-picture 伪类，但也必须满足几个前提：视频已经完成元数据加载、CSS 规则已正确加载并生效、选择器权重足够高，同时页面结构本身也要准确匹配。

picture-in-picture-controls 伪类并不会直接控制画中画窗口

浏览器本身并不允许开发者通过 CSS 直接修改画中画（PiP）窗口内部控件的样式。原因很明确：那一层并不属于网页 DOM，自然也不存在可被 CSS 选中的按钮、进度条或关闭图标。很多开发者会误以为 :picture-in-picture-controls 是给 PiP 小窗“设置样式”的入口，但这正是最常见的误区。这个伪类真正的作用范围只在主页面中——当视频元素进入 PiP 模式时，它会为对应的 元素本身附加一个状态标记，便于按需临时隐藏或调整主页面里原生控制栏的显示逻辑。

常见错误表现：

• 写了 video:picture-in-picture-controls { display: none; }，但 PiP 窗口中的控件完全没有变化
• 在 DevTools 的 Styles 面板里看不到这条规则，甚至搜索不到 picture-in-picture-controls
• Chrome 120+ 与 Safari 17.4+ 对该伪类支持非常有限，Firefox 则完全不支持

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

你真正能够控制的，只有进入 PiP 前后主页面中那个 元素自身的样式表现。比如用户开启画中画后，你希望主页面里的播放器缩成一个迷你占位状态：

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

这里要特别注意三点：

• :picture-in-picture（不带 -controls）才是标准伪类，表示该 当前正处于 PiP 或画中画模式
• 它只会影响主页面 DOM 中的 元素，不会影响画中画窗口本身的控件样式
• 必须确保 已完成元数据加载（即触发 loadedmetadata 事件之后），否则该伪类不会被激活

路径、加载、选择器这三类问题经常同时导致样式失效

即使你已经正确使用了 :picture-in-picture，也很容易因为基础链路出错而出现“CSS 没生效”的现象：

• CSS 文件未成功加载：请在 Network 面板检查 CSS 是否返回 200；如果把 rel="stylesheet" 误写成 rel="sytleSheet" 或 rel="css"，浏览器会直接忽略整个样式文件
• 选择器权重不足：如果框架样式（例如 Bootstrap）或内联样式中写了 height: auto !important，那么你的 video:picture-in-picture { height: 48px; } 就会被覆盖，导致看起来像没生效
• HTML 结构不匹配：该伪类只作用于 元素本身；如果你写的是 .player video:picture-in-picture，但实际结构是
  ，那么由于层级关系和空格形成的后代选择器问题，规则可能无法按预期命中

如果想真正自定义 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 去“美化画中画小窗”，本质上是在与浏览器的安全隔离机制对抗。