如何使用 firebug 检查 CSS 伪类？

Posted 2023-02-22

【中文标题】如何使用 firebug 检查 CSS 伪类？

【英文标题】：How do I inspect CSS pseudo classes with firebug?

【发布时间】：2011-07-20 08:12:37

【问题描述】：

我在不情愿的 a:hover css 样式中挣扎，我无法覆盖它。

我试图检查 Firebug 中的元素，但我不明白为什么它不起作用。我什至看不到如何在 Firebug 中正确检查 a:hover css 事件。

我见过： Firebug 中的悬停检查 http://blog.borngeek.com/2010/04/16/hover-inspection-in-firebug/ 但我还没有弄清楚如何重现那里提到的步骤。

还有： 伪幻影http://meyerweb.com/eric/thoughts/2009/11/03/pseudo-phantoms/

如何使用 Firebug 检查/调试 CSS 伪类，例如 :hover？

【问题讨论】：

对于 Firefox 开发工具，see this answer。

【参考方案1】：

在解决此类问题时，一个有用的技术是比较悬停状态和非悬停状态。打开浏览器的两个实例（双屏或三屏设置很有用），在每个窗口中加载您正在处理的页面，然后按照 JohnP 在他的回答中所说的操作，在一个窗口中查看悬停状态的样式，非悬停在另一个，并从那里进行分析。当样式下拉菜单覆盖实际的 css 详细信息窗格时，在 Firebug 中比较样式很尴尬，虽然您可以通过将鼠标移到您正在处理的元素上和离开来查看 Firefug 中的悬停和非悬停状态 css，做以这种方式进行比较比较棘手。

【参考方案2】：

还有 INSPECT ELEMENT 选项，只需右键单击 Firefox + Firebug 中悬停的元素，就是这样。样式菜单也很方便。

【参考方案3】：

这很容易。只需选择要检查的元素。然后，从右侧的面板中，单击Style 菜单项。在那里你可以选择伪类:hover

编辑

这是一张图片：

【讨论】：

感谢截图。我正在运行 firebug 1.4.5 并没有看到它。我安装了 firebug 1.6.2，一切都很好。再次感谢。

知道如何让它对伪类 :before 和 :after 起作用吗？谢谢

我不认为它可以用于 :before 和 :after。我只看到了这两个选项。

:visited 怎么样？尽管访问了链接，但我只看到未访问的 css，所以我想手动选择它。

@user764754 我不再使用萤火虫了。但是 Chrome 的开发工具有一个 :visited 过滤器，您可以激活它。