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

Question

Chrome开发者工具允许您在"样式"窗格中应用样式规则.我还没有找到在Safari(样式规则窗格)中执行此操作的方法.任何人都知道是否有可能吗？

此外,Safari有像Chrome这样的统治者吗？

Answer 1

OS X上的Safari 8.0.8

1. 右键单击任何元素,然后从弹出菜单中选择" 检查元素 "
2. 确保在检查员的右侧选择样式和规则
3. 然后,您可以通过单击+新规则添加单个规则,或者只需单击并开始键入规则,即可显示" 单击以编辑 "(请参阅​​下图)
4. 输入新规则,这些规则将应用于浏览器窗口中"已检查"的元素.

至于统治者？好吧,我还没有找到一个,但是Inspect按钮会在浏览器窗口中悬停时显示元素的尺寸.

Answer 2

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

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”选择器。这些是为了您的定制而设计的。您可以双击此处以获得向该选择器添加样式的选项。

您还可以单击右侧栏中样式菜单右上角的齿轮，然后选择最后一个选项“新样式规则”，这将允许您定义自己的选择器，独立于您在左边

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