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

Question

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

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

Answer 1

OS X 上的 Safari 8.0.8

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

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

Answer 2

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

或者

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

Answer 3

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

---

Safari 6.xx

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

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

步骤：

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

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

    OR
   

   双击同一侧边栏中“样式属性”下拉菜单下方的开放区域，将您自己的样式添加到该特定元素

---

Safari 5.xx 和更早版本（5.xx 已确认 Win 7 和 Mac OS X）

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

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

在这里，您有两个选择：

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

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

你可以在这里找到完整的苹果文档