查看和编辑CSS - Firefox 开发者工具 编辑

在查看器的CSS面板，你可以查看和编辑CSS。

查看 CSS 规则

规则 视图 列出了适用于所选元素的所有规则，排序从 most-specific 到 least-specific：

如果在开发者工具箱选项中选中“显示浏览器样式”选项，“规则”视图同时就会列出用户代理样式（浏览器样式）。
注：此设置独立于在“计算后”视图中的“浏览器样式” 复选框设置。

规则显示

显示在一个样式表中的每条规则，列表中每条跟随一个列表，内容为 属性:值、 声明 。

• 选择器旁边的图标是一个指向目标的按钮：单击按钮在页面上突出显示匹配这个选择器的所有节点。
• 被划掉的声明是被后面的规则所覆盖的。
• 如果鼠标悬停在一个声明上，,旁边会出现一个复选框，你可以用它来切换或关闭声明。
• 右侧链接到一个规则。

用户代理样式将显示在一个不同的背景上，并显示链接到的文件名和行号，且包含前缀（用户代理）：

If you hover the mouse pointer over a selector in the Rules view, all elements matching that selector are highlighted in the page:

过滤规则

该功能始于Firefox 40，在“规则”视图的顶部增加了一个“过滤样式”检索框：

当您键入：

• 不包含键入字符串的所有规则都被隐藏
• 其中包含了键入字符串的任何声明都被强调

点击检索框末尾的“X”来移除此次过滤。

显示伪元素

从Firefox 41开始，如果下列伪元素被应用到所选择的元素中，规则视图会显示出来：

:after
:before
:first-letter
:first-line
:selection
:-moz-color-swatch
:-moz-number-spin-box
:-moz-number-spin-down
:-moz-number-spin-up
:-moz-number-text
:-moz-number-wrapper
:-moz-placeholder
:-moz-progress-bar
:-moz-range-progress
:-moz-range-thumb
:-moz-range-track
:-moz-selection

如果所选元素应用了伪元素，在这些伪元素选中之前是被隐藏的， 以一个三角作为显示：

单击三角显示它们：

Setting :hover, :active, :focus

从Firefox 41开始，在过滤框右侧新增一个按钮：

单击该按钮可看到三个复选框，你可以用它来对所选元素切换伪类 :hover, :active 和 :focus ：

虽然这个按钮是在Firefox 41中新加入的，但该功能已存在于早期版本的Firefox。在HTML视图中右键元素弹出菜单中 可以对所选元素进行伪类切换。

链接到CSS文件

在每一个规则的右上方会有显示：源文件名 ​​和 行号，并附有链接，点击后在样式编辑器中打开该文件。

从Firefox 41开始，您可以复制源文件的位置。右击该链接并选择“复制位置”。

查看器能理解CSS source maps。这意味着，如果你正在使用的一个对source maps具有支持能力的CSS预处理器，并在样式编辑器设置中启用对source maps的支持，则该链接将带您到原始来源，而不是生成CSS:

到样式编辑器文档了解更多关于对CSS source map的支持。

获取CSS属性帮助

Starting in Firefox 40, if you context-click on a CSS property name in the Rules view, you can open a popup displaying help for that property from MDN:始于Firefox 40，如果你在规则视图中右键CSS属性名称，选择菜单中”显示MDN文档“项，可以打开一个弹窗显示从MDN获取的该属性的帮助信息：

请注意，就目前而言，帮助信息直接从MDN获取，非缓存，因此该功能需要网络连接。

查看计算后CSS

要查看所选元素的完整计算后CSS，请切换到”计算后“视图。这里显示选定元素的每个CSS属性计算后值 ：

单击属性名旁边的箭头显示规则和设定值，以及一个源文件名和行号的链接：

默认情况下，该视图只显示已明确的由页面设置的值，要看到所有值，请点击“浏览器样式”复选框。

在检索框中键入关键字可以进行列表的实时过滤。因此，举例来说，如果你只是想看看字体相关的设置，你可以在检索框键入“font”，会只有属性名称中带有“font”的被列出。你也可以检索属性的值，在检索框中键入"Lucida Grande"，找到被设置成该值的字体规则。

编辑规则

如果你点击一个声明或规则，你可以对其进行编辑和查看，并立即看到结果。要添加一个新的声明到规则中，则点击规则的最后一行（右括号占据行）。如果你编辑时，输入了一个无效属性值，或未知属性名称，声明下会出现一个黄色的警告图标。

你所做的任何更改都是临时的，重新加载页面会恢复原来的样式。

在编辑模式下您可以使用箭头键来增大/减小规则数字。按一下向上箭头会由“1px”变成”2px“，Shift +向上/向下将以10为最小单位改变，Alt +向上/向下变化值为0.1，shift+Page up/down 变化值为100。

添加规则

你可以在规则视图中添加新的规则。只需在右键单击后显示的上下文菜单中，选择“添加规则”。将对当前选择匹配的节点添加一个新的CSS规则。

始于Firefox 41，新增一个按钮，使你能够做同样的事情。

复制规则

Starting in Firefox 41, there are extra context menu items in the Rules view to copy rules, and pieces of rules, to the clipboard:从Firefox 41开始，在规则查看视图上下文菜单新增了 复制规则和规则匹配项目到剪贴板：

• 复制规则
• 复制选择器
• 复制属性声明
• 复制属性名称
• 复制属性值

也可以看看

查看器还包括一些辅助CSS的特别工具，如颜色，字体和动画。要了解这些详见导览列表。