调试DOM元素hover,focus,actived的样式--谷歌浏览器调试器

平时写页面代码，给DOM添加一些css样式时，我们可以用谷歌浏览器的开发者工具进行调试。如下图这样：



出现的效果是这样的：



相应的按F12打开Chrome的开发者工具，可以看到相应的样式：



那么关键的问题来了，我想看：hover样式哪里去了？接下来找到并点击这个按钮：



选中：hover，你就能看见你所写的：hover样式了：



相应的火狐浏览器可以这样打开：