谷歌瀏覽器檢視編輯元素CSS樣式

通過谷歌瀏覽器可以檢視當前頁面應用的具體CSS程式碼。

並且還可以線上編輯（僅對客戶端有效）對應的CSS程式碼以便檢視頁面渲染效果。

一.檢視指定元素CSS樣式：

通過谷歌瀏覽器我們可以檢視應用於指定元素上的CSS程式碼。

檢視步驟如下：

（1）.滑鼠右擊對應的元素：

然後點選彈出層的檢查選單，會彈出如下介面：

在右側可以看到定義在連結<a>元素的CSS程式碼，簡單分析如下：

（1）.頂部element.style展示的是通過元素style屬性定義的CSS，由於沒有定義所以為空。

（2）.下面都是通過外部引入CSS檔案定義的CSS屬性，並且給出了CSS具體定義的位置。

（3）.被橫線穿過的CSS屬性定義，說明它被其他的同名屬性定義覆蓋，並沒有生效。

再往下看，截圖如下：

User agent stylesheets表示是瀏覽器自帶預設的樣式規則。

繼續往下看，截圖如下：

Inherited from表示CSS屬性從指定元素幾成而來。

如上述截圖，點選dd可以跳轉到對應的DOM結構位置，並且右側也會顯示dd的CSS程式碼定義。

二.檢視CSS偽類的定義：

上面介紹的方式無法檢視定義在元素上的CSS偽類程式碼。

點選頂部的:hov按鈕，然後選擇彈出層裡面的相關偽類即可檢視對應的CSS程式碼了。

三.編輯CSS程式碼：

下面再來介紹一下如何線上編輯CSS程式碼。

當然這個編輯只會對客戶端的樣式表現產生影響，不會影響伺服器程式碼，否則豈不是亂套了。

按照上面介紹的方式檢查元素，然後直接線上編輯元素：

（1）.直接在元素上通過style屬性設定：

右擊對應的元素，然後會彈出上述選單，點選Edit as HTML進行編輯即可：

（2）.編輯CSS程式碼：

檢查元素後，會在某個地方出現應用在其上的CSS程式碼。

我們可以直接線上編輯這些程式碼：

通過雙擊指定的位置可以修改已經存在的CSS程式碼，或者新增新的CSS程式碼。

（3）.為元素新增class屬性：

點選對應的按鈕，可以輸入要新增的class的名稱，即可新增完畢。

（4）.新增新的規則：

點選加號即可為當前元素新增一個新的樣式規則，然後在其中編輯相應程式碼即可。