我试图在大量 CSS 文件中找到 CSS 规则，该规则负责在输入元素获得焦点时将框阴影(或类似的东西)应用于输入元素。
我的问题是这样的。当元素获得焦点时，与其正常状态相比，我如何才能准确地看到哪些样式发生了变化？
我知道如何在元素上设置焦点状态，这样我就可以完全检查所有在两种状态上应用的计算样式:
但问题是在两种状态下元素上设置的样式太多，我无法轻松跟踪更改的内容。它可以是一个盒子阴影，一个边框，一个轮廓……有很多规则和很多可能性。
我知道我可以使用右侧的侧边栏来查看所有适用的样式规则 - 但再次强调，有太多的东西很难跟踪有什么不同。
目前我有三个选择:
- 在正常状态下写下所有计算样式，然后在 :focus 状态下写下所有样式，然后进行手动比较
- 为两种状态写下所有匹配的 CSS 规则，并进行手动比较
- 寻找一种方法来进行实际差异!
所以我的问题是:(3) 可能吗？
最佳答案
在样式部分(计算样式下方)下的 Chrome 开发者工具中，有一个按钮(切换元素状态)来模拟状态。如果您想查看不同状态下哪些样式处于事件状态，这将非常有用。
关于css - 开发者工具 : How can I quickly check the difference in styles between normal state and :focus?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16018371/