firefox查看器的使用

本文内容大部分转自https://developer.mozilla.org/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS

1、所有具有指定样式类元素的高亮显示。

点击该处，则所有具有该样式类的元素都会高亮显示。

显示伪元素

从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

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

单击三角显示它们：

查看计算后CSS

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

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

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

添加规则

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

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