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

Question

我一直喜欢的webkit检查程序之一就是您可以单击任何选择器并开始添加样式并观看它们的实时显示。

我通常在Chrome中进行所有调试，但是需要使用iPhone模拟器调试我注意到Safari 7的Web检查器不像以前那样行事。

问题是我似乎无法点击选择器来添加/编辑样式（就像你可以在Web检查器中为所有其他浏览器...甚至IE浏览器）。

我错过了什么吗？我无法通过搜索找到答案，而我发现的最接近的是：How do you apply style rule in Safari Web Inspector?

以下是我在 Chrome 中所做的事情的截图：

这是 Safari 7 ：

Answer 1

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

我在添加样式规则时使用个人屏幕截图更好地展示了它：

以下是字体颜色最初的显示方式： #494949

对于此示例，我首先取消选中初始CSS样式 color: #494949

我点击了 semicolon 或 ; background: #FFF; 之后按下进入。如下图所示，它让我换上了一条新线。

我输入了 color: #FFF; ，它会自动将其应用到网页上。 （您也可以在完成样式规则编写后按Enter键。）

结果如下：

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

Answer 2

我现在不是这可以帮助你但是这里有关于safari 6.x的答案

how do you apply style rule in safari web inspector

我没有测试过，我使用的是基础：D

简历

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

OR

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

Answer 3

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