css - 开发者工具 : How can I quickly check the difference in styles between normal state and :focus?

Question

我试图在大量 CSS 文件中找到 CSS 规则，该规则负责在输入元素获得焦点时将框阴影(或类似的东西)应用于输入元素。

我的问题是这样的。当元素获得焦点时，与其正常状态相比，我如何才能准确地看到哪些样式发生了变化？

我知道如何在元素上设置焦点状态，这样我就可以完全检查所有在两种状态上应用的计算样式:

但问题是在两种状态下元素上设置的样式太多，我无法轻松跟踪更改的内容。它可以是一个盒子阴影，一个边框，一个轮廓……有很多规则和很多可能性。

我知道我可以使用右侧的侧边栏来查看所有适用的样式规则 - 但再次强调，有太多的东西很难跟踪有什么不同。

目前我有三个选择:

1. 在正常状态下写下所有计算样式，然后在 :focus 状态下写下所有样式，然后进行手动比较
2. 为两种状态写下所有匹配的 CSS 规则，并进行手动比较
3. 寻找一种方法来进行实际差异!

所以我的问题是:(3) 可能吗？

Answer 1

在样式部分(计算样式下方)下的 Chrome 开发者工具中，有一个按钮(切换元素状态)来模拟状态。如果您想查看不同状态下哪些样式处于事件状态，这将非常有用。