如何在Firefox与Chrome浏览器中查看包含伪选择器的所有CSS属性，无需逐个勾选即可查看元素:hover、:active、:focus等伪状态样式

当然没问题！作为经常和浏览器调试工具打交道的开发者，我很清楚Chrome和Firefox都自带了一键查看元素所有伪类样式的功能，完全不用逐个手动触发状态。下面给你分浏览器详细说操作：

Chrome 开发者工具操作指南 #

• 先打开开发者工具：按F12快捷键，或者右键点击目标元素选择「检查」，选中你要分析的元素。
• 切换到右侧的「样式」面板，在面板顶部找到标着:hov的按钮（hover的缩写，很小但很好找），点击它。
• 点击后会展开一个伪类选项列表，里面包含:hover、:active、:focus、:visited、:focus-within等几乎所有常用伪类。
• 你可以一次性勾选多个伪类，比如同时选:hover和:focus，对应的样式会立刻显示在下方的样式列表里，还能清晰看到不同伪类样式的优先级、覆盖关系，甚至能直接修改伪类样式实时预览效果。
• 这个模拟状态是临时的，取消勾选就会恢复元素原本的样式，不会影响页面实际交互。

Firefox 开发者工具操作指南 #

• 同样先打开开发者工具：F12或者右键「检查元素」，选中目标元素。
• 右侧切换到「规则」面板，在面板顶部找到一个图标是「方框+冒号」的「伪类」按钮，点击它。
• 弹出的选项框里列出了所有支持的伪类，勾选:hover、:active等你需要查看的状态即可。
• Firefox还支持一些Chrome里需要额外设置的伪类，比如:focus-visible，直接勾选就能看到对应的样式规则，而且每个伪类样式会明确标注归属，不会和默认样式混淆。
• 如果需要批量查看多个元素的伪类样式，你可以保持伪类勾选状态，切换不同元素时，工具会自动加载对应元素的伪类样式。

小提示 #

不管是Chrome还是Firefox，这个功能都能帮你快速定位伪类样式的问题，比如为什么hover样式不生效，或者active状态的样式被覆盖了，比手动触发状态调试高效太多。

内容的提问来源于stack exchange，提问作者Zenit