MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

查看和编辑CSS

在查看器的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的特别工具,如颜色,字体和动画。要了解这些详见导览列表

文档标签和贡献者

标签: 
 此页面的贡献者: c_king
 最后编辑者: c_king,