CSS除錯小技巧 —— 除錯DOM元素hover,focus,actived的樣式

雲霏霏發表於2015-04-01
CSS除錯

　　最近學習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是無法除錯的。

 

相關文章