如何获取iOS Safari浏览器原生元素（如<video>播放器）的默认样式？

好问题！我刚好研究过iOS Safari里原生元素的默认样式，尤其是<video>播放器这部分，给你整理几个实用的方法：

1. 开启Safari开发者工具的「用户代理样式表」显示 #

首先得把Safari的开发者模式打开，步骤很简单：

• 在Mac的Safari里，点击顶部菜单栏的「Safari」→「偏好设置」→「高级」，勾选「在菜单栏中显示开发菜单」。
• 给你的iOS设备开启Web检查器：打开iOS的「设置」→「Safari浏览器」→「高级」，开启「Web检查器」。
• 用数据线把iOS设备连到Mac，在Mac的Safari「开发」菜单里找到你的设备，选择要调试的网页。
• 打开元素检查器后，在右侧样式面板的右上角点击「...」按钮，勾选「显示用户代理样式表」。这时候就能看到浏览器给所有原生元素设置的默认CSS规则了。

2. 解锁<video>播放器的Shadow DOM结构 #

你说的完全正确——iOS Safari的原生<video>播放器UI确实是用HTML+CSS渲染的，只是这些元素默认藏在Shadow DOM里，不会直接在检查器中显示。要看到它们，只需两步：

• 在元素检查器的右上角「...」菜单里，勾选「显示Shadow DOM」。这时候再选中页面里的<video>元素，就能展开它内部的Shadow DOM节点，看到播放按钮、进度条、控制栏这些带类名的<div>元素了。
• 如果你临时不想全局开启Shadow DOM显示，也可以选中<video>元素后，在控制台执行$0.shadowRoot，手动调出它的Shadow DOM节点，展开就能看到所有内部UI元素。

3. 提取<video>播放器的具体样式 #

当你能看到Shadow DOM里的元素后，查看样式就和普通DOM元素一样了：

• 点击Shadow DOM里的某个UI元素（比如播放按钮、进度条），右侧样式面板会直接显示它的用户代理样式，包括默认的颜色、尺寸、布局，甚至伪类状态（比如点击、hover时的样式）。
• 如果需要获取某个元素的完整计算样式，可以在选中元素后，在控制台执行getComputedStyle($0)，就能拿到该元素所有最终生效的CSS属性值。

补充一下你提到的YouTube例子：YouTube的原生播放器没有隐藏<video>的Shadow DOM结构，所以你能直接看到内部的子元素和类名，而iOS Safari默认是把这些Shadow DOM节点隐藏起来的，所以需要手动开启显示才能看到。

内容的提问来源于stack exchange，提问作者norlin