谷歌工具檢視CSS程式碼定義的位置

admin發表於2018-04-29
谷歌CSS

通過谷歌開發者工具可以非常方便的除錯前端程式碼。

通過右擊指定元素，然後點選檢查選單，可以檢視應用到指定元素上的CSS程式碼。

圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201804/29/233142vsuptnrj3urpnzac.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

然後在後側可以檢視對應的CSS程式碼：

aid[972]

檢視程式碼是否有不妥之處，如果有，則進行修改（當然首先要找到這些CSS程式碼定義在何處）。

一.定義在元素內部：

如果CSS程式碼定義在元素內部，那麼會以element.style方式在谷歌開發中展現：

a:3:{s:3:\"pic\";s:43:\"portal/201804/29/233622dqjizdeihsea66a2.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

二.定義在外部樣式表：

在CSS程式碼的後部會有相應的樣式表名稱，並標註了當前程式碼所在的行。

a:3:{s:3:\"pic\";s:43:\"portal/201804/29/233739eebql2elt00m101l.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

三.定義在內部樣式表：

定義在內部樣式表和定義在外部CSS檔案類似，會在相應CSS程式碼後部有標註：

a:3:{s:3:\"pic\";s:43:\"portal/201804/29/234007fazqsqwryi5rba7z.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

相關文章