如何在 firebug 和 chrome 调试器中看到附加到 :hover 和其他伪类的样式

Posted 2023-03-07

【中文标题】如何在 firebug 和 chrome 调试器中看到附加到 :hover 和其他伪类的样式

【英文标题】：How can I see the styles attached to :hover and other pseudo classes in firebug and the chrome debugger

【发布时间】：2011-10-09 16:25:26

【问题描述】：

我知道一定有办法做到这一点，而且我一直都在解决它，但是，有什么方法可以让我看到（和/或编辑）应用于元素的伪类样式？

例如，我希望在调试器中编辑.myclass:hover 或#someid:active。

ps。我真的更关心如何在 chrome 调试器中执行此操作，尽管 firebug 很受欢迎！

【参考方案1】：

检查元素，然后：

对于 Firebug：

请注意，如果您再次飞过该元素，悬停 CSS 代码将消失（您必须重新检查 :hover）。

对于 Chrome：

您可以同时看到伪类规则并将它们强制用于元素。

要在“样式”窗格中查看它们，请单击右上角的小虚线框按钮。

要强制元素进入:hover 状态，请右键单击它。

【讨论】：

这是哪个版本的chrome？

你知道它是否在任何更稳定的版本上可用？贝塔？开发者？

【参考方案2】：

在 Chrome 中，您只需右键单击（以便悬停）div 并单击检查。 如果 Inspect 框在控制台中，当您右键单击它时，您的鼠标“落”在控制台中，同时您仍然悬停在 div 上。然后你就可以正常看到 :hover 伪样式了。

这很愚蠢，但这是我的解决方法。

【讨论】：

这在非常小的元素上几乎是不可能的，不过感谢您的提示

不，不是。只需扩展控制台，使其占据大部分屏幕。那么右键下拉菜单应该部分在控制台中。那么你就完成了。

我不得不承认，我过去曾使用过类似的东西。

哈哈，即使这样也很烦人。只是展示了直到最近前端开发人员如何被视为二手公民

是的，很高兴看到新的 Chrome 将实现更好的东西（虽然很难比这更快，因为它看起来很愚蠢，但实际上感觉很自然，并且不会添加任何点击来获取信息）

【参考方案3】：

在 Firebug 中，您可以使用 :hover 和蓝色选择箭头工具来选择一个元素，当您将鼠标悬停在该元素上时，您将能够看到它。不幸的是，当您移动鼠标时它会消失，但您可以看到它在哪一行，然后通过 firebug css 选项卡编辑 CSS。