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

Question

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

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

Answer 1

OS X上的Safari 8.0.8

1. 右键单击任何元素，然后从弹出菜单中选择检查元素
2. 确保在检查员右侧选择样式和规则
3. 然后，您可以点击 +新规则添加单个规则，或者只需点击并开始输入点击编辑的规则（参见下图）
4. 输入新规则，这些规则将应用于正在检查的元素＆＃34;在浏览器窗口中。



至于统治者？好吧，我还没找到，但 Inspect 按钮会在浏览器窗口中悬停时给出元素的尺寸。

Answer 2

是的，这绝对是可能的 - 以下是：

---

Safari 6.x.x

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

对于最新版本的Safari 6.0+，

Apple已经摒弃了移除那些gui元素的奢侈品。该功能仍然可用，但只是稍微隐藏。在safari 6中添加你的风格你需要按照上述步骤：

步骤：

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

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

    OR
   

   双击同一侧栏中“样式属性”下拉列表下方的空白区域，将自己的样式添加到该特定元素

---

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

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

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

在这里，你有两个选择：



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



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

you can find the full apple documentation here

Answer 3

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

OR

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