如何在 Safari Web Inspector 中应用样式规则？答案

【问题标题】：How do you apply style rule in Safari Web Inspector?如何在 Safari Web Inspector 中应用样式规则？
【发布时间】：2013-05-29 02:11:31
【问题描述】：

Chrome 开发者工具允许您在样式窗格中应用样式规则。我还没有在 Safari（样式规则窗格）中找到这样做的方法。有谁知道可以吗？

另外，Safari 是否有像 Chrome 那样的标尺？

【问题讨论】：

【解决方案1】：

OS X 上的 Safari 8.0.8

至于尺子？好吧，我还没有找到，但是当鼠标悬停在浏览器窗口中时，Inspect 按钮会给你元素的尺寸。

【讨论】：

【解决方案2】：

或

【讨论】：

【解决方案3】：

是的，这绝对是可能的——方法如下：

Safari 6.x.x

（Safari 6.0.1 解决方案已在 Mac OsX 上确认）

对于最新版本的 Safari 6.0+，Apple 已经采取了删除这些 gui 元素的奢侈措施。该功能仍然可用，但只是稍微隐藏了一点。要在 safari 6 中添加您的样式，您需要按照上述步骤操作：

步骤：

首先选择右侧边栏中的{}括号图标
从 Web 检查器中心白色区域的 DOM 模型中 - 单击以选择要查看其样式的 HTML 元素。（它们将显示在右侧样式侧边栏中）
在右侧样式侧边栏：双击您要编辑的选择器的现有样式上的右大括号。
```
 OR
```
双击同一侧边栏中“样式属性”下拉菜单下方的空白区域，将您自己的样式添加到该特定元素

Safari 5.x.x 及之前的版本（5.x.x 已确认 Win 7 和 Mac OS X）

假设您已在设置高级菜单中启用检查器，您可以开始右键单击并检查元素...

从那时起，从 html 标记左侧的 DOM 中选择一个元素。现在在右侧边栏上确保“样式”菜单已展开。

一旦在这里，您有两个选择：

对于您可以从左侧选择的每个 DOM 元素，应该有一个空白的“element.style”选择器。这些是为您的定制而设计的。您可以双击此处获得向该选择器添加样式的选项。

您也可以单击右侧栏中样式菜单右上角的齿轮，然后选择最后一个选项“新样式规则”，这将允许您定义自己的选择器，而与您拥有的 DOM 元素无关选择在左边

【讨论】：