原生video控制条无法用标准CSS选择器控制，因其位于Shadow DOM内且无公开接口；仅WebKit/Blink支持不稳定的私有伪元素，但Chrome 95+已逐步弃用；唯一可靠方案是禁用原生controls，用HTML+CSS+JS自定义实现。
video 元素的控制条根本不能用 CSS 选择器直接选中
浏览器内置的 <video> 控制条（play button、progress bar、volume slider 等）是 Shadow DOM 内部渲染的，原生状态下**没有公开的 CSS 选择器接口**。你写 .video::-webkit-media-controls 看似能生效，其实只是 WebKit/Blink 内核的私有伪元素，且行为极不稳定——Chrome 95+ 已逐步禁用大部分 ::-webkit-media-controls-*，Firefox 和 Safari 更不支持。
常见错误现象：
– 写了 video::-webkit-media-controls-play-button { display: none; }，在新版 Edge 里完全没反应
– 用 input[type="range"]::-webkit-slider-thumb 去套视频音量滑块，结果连样式都挂不上
– 以为加个 -moz- 或 -ms- 就能跨浏览器，实际 Firefox 根本不识别这些前缀
真能控制的只有「可暴露的伪元素」，且仅限特定内核
目前仅 WebKit/Blink（Chrome、Edge、Safari）提供有限的、非标准的伪元素访问入口，但必须满足两个前提：控制条已启用（controls 属性存在），且未被 JS 覆盖（如用 video.controls = false 后再设为 true，部分伪元素会失效）。
-
video::-webkit-media-controls：仅容器，无法进一步嵌套选择子控件 -
video::-webkit-media-controls-panel：控制条背景面板，可改背景色/透明度 -
video::-webkit-media-controls-play-button：仅 Chrome 88–94 可靠，新版需配合appearance: none才可能生效 -
video::-webkit-media-controls-volume-slider：体积小、易错位，width设为100%反而会溢出
注意：-o-（Opera）、-ms-（IE）前缀对媒体控件完全无效；-moz- 在 Firefox 中无对应伪类，强行写不会报错但毫无作用。
立即学习“前端免费学习笔记（深入）”；
可靠方案：关掉原生 controls，自己用 HTML + CSS + JS 实现
这是唯一跨浏览器、可维护、能深度定制的方式。核心思路是：controls 属性设为 false，用 <button>、<input type="range"> 等标准元素构建 UI，再通过 video.play()、video.currentTime、video.volume 等 API 绑定行为。
- 进度条必须用
input[type="range"]+video.ontimeupdate实时同步，不能只靠 CSS - 播放/暂停按钮需监听
video.paused状态切换图标，不能只靠 class 切换 - 音量滑块要监听
video.volumechange事件，否则拖动后静音状态不同步 - 移动端需额外处理
touchstart替代click，否则 iOS Safari 点击无响应
示例关键片段：
<video id="myVideo" controls="false"></video><br><div class="custom-controls"><br> <button id="playBtn">▶</button><br> <input type="range" id="progress" min="0"><br></div>
然后用 JS 绑定：
playBtn.addEventListener('click', () => myVideo.paused ? myVideo.play() : myVideo.pause());
Vendor 前缀在这里是陷阱，不是解药
加 -webkit- 不等于能控制，它只是把一个随时可能被移除的实验性接口暴露给你。2023 年起 Chromium 已标记 ::-webkit-media-controls-* 为「deprecated」，DevTools 控制台会警告；Safari 17 对这些伪类的支持进一步收紧，部分甚至返回空 CSSStyleDeclaration。
真正需要兼容老版本（如 Chrome 70–85）时，唯一可行做法是：用 @supports (-webkit-appearance: none) 做特性检测，内部才写伪元素样式；其余情况一律走自定义控件路径。别在 build 脚本里配 Autoprefixer 处理媒体控件——它根本不认识这些伪类。
最常被忽略的一点：即使伪元素样式生效，其尺寸、定位、z-index 都受浏览器内部 layout 引擎硬编码约束，比如进度条高度永远固定为 36px，height: 20px 会被无视。这种限制没法绕过，只能接受或放弃。
