如何在Safari 7的Web Inspector中为选择器添加规则？

Question

我一直喜欢 Webkit Inspector 的一个功能，即您可以单击任何选择器并开始添加样式并实时查看它们。我通常在 Chrome 中进行所有调试，但是需要使用 iPhone 模拟器进行调试，我注意到 Safari 7 的 Web Inspector 的行为与以前不同。问题在于，我似乎无法单击选择器以添加/编辑样式（就像在所有其他浏览器的 Web Inspector 中一样...甚至是 IE）。我是否错过了什么？我通过搜索找不到答案，最接近的是这个：How do you apply style rule in Safari Web Inspector? 这是我在 Chrome 中的操作截图： 而这是 Safari 7：

- Joe

Answer 1

我使用的是Safari版本7.0.4(9537.76.4)。我相信这是最新版本。

我用个人截图更好地演示了添加样式规则的过程：

以下是字体颜色初始状态：#494949 图片如下所示：

为了这个例子，我首先取消了初始CSS样式color: #494949，结果如下图所示：

然后，我在background: #FFF;后面的分号或者“;”之后点击右键并按回车键。如下图所示，它会将光标移动到新的一行上。

接着，我输入了color: #FFF;，它会自动应用到网页上。(你也可以在完成样式规则后按回车键。)

结果如下所示：

最终效果如下图所示：

或者你也可以点击下面显示的New Rule按钮：

- imbondbaby

---

哇，我简直不敢相信这就是全部。我不知道你可以把光标放在那个区域，然后按回车键换行...从我记得的其他网络检查器来看，没有一个像这样表现！非常感谢。 - Joe

谢谢。现在我敢你找出如何创建一个全新的规则。不是在元素面板中点击的那种规则。假设你想从Web检查器中创建一个全新的媒体查询，并在其中添加新规则，这是否在Safari中可行？ - Kyle Vassella

Answer 2

我不知道这是否能帮到你，但这里有一个关于Safari 6.x的答案

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

我没有测试过，我使用elementary :D

总之

首先，在右侧边栏中选择{}括号图标 从Web Inspector中心白色区域的DOM模型中，单击选择要查看样式的HTML元素（它们将显示在右侧样式边栏中） 在右侧样式边栏中：双击现有样式的闭合括号，以编辑您想要编辑的选择器的样式。

或者

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

- stalin

Answer 3

如果您需要更改CSS数字值，例如您需要调整宽度或边距 - 使用Alt +箭头上/下进行1px步长的调整或ALT + Shift +箭头上/下。或者您可以直接更改所需的数字。

- Anatolii Pazhyn