1

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

我的问题是这个。当元素变得聚焦时，我如何才能准确地看到哪些样式正在发生变化，而不是它的正常状态？

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

在此处输入图像描述

但问题是在这两种状态的元素上设置了太多样式，以至于我无法轻松跟踪发生了什么变化。它可以是一个盒子阴影、一个边框、一个轮廓……有很多规则和很多可能性。

我知道我可以使用右侧边栏来查看所有适用的样式规则 - 但同样，有太多以至于很难跟踪其中的不同之处。

目前我有三个选择：

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

所以我的问题是：（3）可能吗？

4

2 回答 2

2

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

于 2013-04-15T15:01:14.783 回答
1

你可以试试我的CSSDiff扩展。它显示了最后两个检查元素之间的差异。这并不是您想要实现的目标，但是，您应该能够通过检查两个相同类型的输入来使用它（这样您将看到焦点元素和非焦点元素之间的实际差异） .

于 2013-05-02T17:43:44.607 回答