在chrome（或任何浏览器）中，在添加和删除类时，您能看到css样式中的差异吗？

如果我有以下css

.unfocus {
  background-color: blue;
  opacity: .3;
}

.focus {
  opacity: 1;
}

---

当我将.unfocus类替换为.focus时，是否有方法仅查看元素上更改的属性？

google chrome store的一个扩展可以实现这一点：

请参见视频演示：

您可以看到以下方面的差异：

• 元素的不同状态（焦点/非焦点）
• 比较选项卡之间的css差异
• 将元素与其他元素进行比较

---

我假设您正在根据输入元素是否集中在以下位置来切换这些类：

最接近这一点的功能是ChromeDevTools中的ToggleElementState菜单。按钮标题为

：hov

单击此按钮将显示4个切换选项。如果选择

：focus

，它将显示下面CSS属性中的任何更改

---

否，您需要第三方附加组件。切换的类是否取决于元素聚焦的时间？猜这是一个输入？