首页 文章

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

提问于
浏览 次
4

我一直喜欢webkit检查器的一件事是你可以点击任何选择器并开始添加样式并观看它们的实时显示 .

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

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

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

这是我在 Chrome 内所做的截图：

Chrome Web Inspector

这是 Safari 7 ：

enter image description here

css debugging dom safari web-inspector

3 回答

  • 0

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

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

    Here is how the font color initially looked: #494949

    enter image description here

    For this example, I began by un-checking the initial CSS style color: #494949

    enter image description here

    I clicked right after the semicolon or ; after background: #FFF; and pressed enter. It put me on a new line as you can see in the picture below.

    enter image description here

    I entered color: #FFF; and it automatically applied it to the webpage. (You can also press enter after you are done writing the style rule.)

    enter image description here

    Here is the result:

    enter image description here

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

    enter image description here

    回复于
  • 0

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

    how do you apply style rule in safari web inspector

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

    在简历中

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

    要么

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

    回复于
  • 2

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

    回复于

相关问题