如何使用Firebug检查CSS伪类？

Question

我在尝试覆盖一个不情愿的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？

- augustin

---

对于Firefox开发工具，请参考此答案：https://dev59.com/VXNA5IYBdhLWcg3wIqLr#13855134。 - Flimm

Answer 1

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

编辑

这是一张图片：

- JohnP

---

感谢提供截图。我之前用的是 firebug 1.4.5，没有发现问题。现在已经安装了 firebug 1.6.2，一切正常。再次感谢。 - augustin

有没有什么办法让这个方法也适用于伪类:before和:after？谢谢 - frequent

我认为这对于:before和:after是不可能的。我只看到过这两个选项。 - JohnP

那么:visited怎么办？虽然链接已被访问，但我只看到未被访问的CSS，因此我想手动选择它。 - user764754

@user764754 我不再使用Firebug了。但是Chrome的开发工具有一个:visited过滤器，你可以激活它。 - JohnP

Answer 2

还有检查元素选项，只需在Firefox + Firebug中右键单击悬停的元素即可。样式菜单也很方便。

- Jeeba

Answer 3

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

- Chris Halcrow