最近學習html5和一些UI框架，接觸css比較多，就來跟大家分享一下css中的一些調試技巧。之前做頁面，css都是自己寫的，所以要改哪里可以很快的找到，現在使用了UI框架，里面的樣式是不可能讀完的，所以就要通過調試來找到要修改的地方。
在調試CSS的時候，我們一般使用Chrome、Firefox、IE等瀏覽器自帶的工具，快捷鍵都為F12.但是，我們要調試如hover的樣式時，鼠標放上去才會顯示，鼠標一走就看不到了，沒辦法看清楚css樣式，還有就是瀏覽器自帶的一些hover、foucs、active樣式，怎么也找不到。今天我們就來看看，怎么調試他們吧！
首先，我們來寫一個簡單的頁面，只有兩個按鈕，代碼如下：
<!DOCTYPE html> <html> <head> <title>Hover</title> </head> <body> <style type="text/css"> div { margin:100px; } button {background: #FEFEFE; width: 80px; height:30px; border: 1px #ccc solid; cursor:pointer;} button:hover {background: #DEDEDE; cursor: pointer; } button:active { border:#0FF 1px solid; background: #FEFEFE;} button:focus { border:#0FF 1px solid; background: #FEFEFE;} </style> <div> <button id="btnOk">OK</button> <button>Cancel</button> </div> </body> </html>
首先來說一下我最喜歡的chrome：
然后是Firefox，如圖：
最后是IE：
都比較簡單，不過這都只是針對css的，對於用javascript動態加上去的css是無法調試的。