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

Question

Chrome开发者工具允许您在样式面板中应用样式规则。我还没有找到在Safari（样式规则面板）中执行此操作的方法。有人知道是否可能吗？

此外，Safari是否像Chrome一样有标尺呢？

- 4thSpace

---

这有点古怪，因为我自己习惯于使用Chrome和FF开发工具，但我刚刚写了一篇如何做到这一点的文章。 - Joe

Answer 1

在OS X上使用Safari 8.0.8

1. 右键单击任何元素，从弹出菜单中选择“检查元素”
2. 确保在检查器的右侧选择了“样式”和“规则”
3. 您可以通过单击“+新规则”来添加单个规则，或者只需单击并开始输入规则，其中出现“单击以编辑”（请参阅下面的图像）
4. 输入您的新规则，这些规则将应用于在浏览器窗口中“检查”的元素。

至于标尺？嗯，我没有找到一个，但是“检查”按钮将在浏览器窗口中悬停时提供元素的尺寸。

- Reggie Pinkham

---

新规则必须适用于当前选定的元素，否则它将立即消失。例如，如果您选择了<p>，则不能创建一个span {}规则。 - Merchako

Answer 2

1. 打开类似于 DevTools 的面板（CMD + OPT + C）。
2. 点击元素选项卡。
3. 如果还没有打开，点击右侧的“显示详细信息侧边栏”（CMD + OPT + 0）。

或者

1. 右键单击元素并选择“检查元素”。
2. 如果还没有打开，点击右侧的“显示详细信息侧边栏”（CMD + OPT + 0）。

- zok

Answer 3

是的，这绝对是可能的 - 这是如何实现的：

---

Safari 6.x.x

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

针对最新版本的Safari 6.0+，苹果已经取消了那些GUI元素，但该功能仍然可用，只是位置稍微有些隐藏。要在Safari 6中添加样式，请按照以下步骤进行：

步骤：

1. 首先，在右侧边栏中选择{}括号图标
2. 在Web检查器的中央白色区域的DOM模型中，单击以选择要查看样式的HTML元素（它们将显示在右侧样式侧边栏中）

3. 在右侧样式侧边栏中：双击要编辑其选择器的现有样式的结束大括号。

    或者
   

   在同一侧边栏中，双击“Style Attribute”下拉菜单下方的空白区域，以添加自己的样式到特定元素中

---

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

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

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

在这里，您有两个选项：

每个你可以从左侧选择的DOM元素都应该有一个空的“element.style”选择器可用于自定义。你可以双击此处，以获得向该选择器添加样式的选项。

你也可以点击右侧边栏样式菜单的右上角齿轮图标，选择最后一个选项“新样式规则”，这将允许你定义自己的选择器，独立于左侧选择的DOM元素。 在这里你可以找到完整的苹果文档

- Joe

---

我没有看到这些选项。我的窗口看起来像苹果链接中的那个。你的完全不同。我正在运行Safari 6.0.4。 - 4thSpace

我将要交叉检查我的Safari 6版本，看看能否解决这个问题。但是我在我的回答中谈论的是样式面板，而不是内联。 - Joe

好的，我现在明白你的意思了。但是答案中并不是那么明显。首先在左侧窗格中点击某个元素。在样式窗格中，单击任何一个闭合括号，这将为新规则添加一个条目。 - 4thSpace

OP还有一个问题，Safari有标尺吗？ - 4thSpace