CSS樣式不生效錯誤排查
標籤： CSS 不生效 前端
在寫頁面時，有時會發現自己寫的樣式無法生效，由於缺乏經驗，排查以來耗時耗力，最終可能發現只是由於自己一個小小的失誤導致，於是便萌生結合網上的一些經驗，寫一篇CSS樣式不生效的文章，希望能給一些初涉此道的朋友一些幫助。
排查步驟
首先，先試一下清除快取，重啟瀏覽器等手段，無效後再進行進一步排查。
接著按以下流程排查：
以下是排查以及修改方法：
再次提醒在排查前先試一下清除快取，重啟瀏覽器等手段，無效後再進行進一步排查。有可能自己什麼都沒有做錯，就是因為快取或者瀏覽器的問題導致，重置一下也許問題就解決了。
常見錯誤
未關聯外部樣式表
這是一個讓人很無語的錯誤，但我以前確實遇到過，辛辛苦苦寫好了程式碼，發現一個樣式都沒有生效，傻乎乎地忙活了半天，最後居然發現自己忘了關聯外部樣式，當時我的心情，真是。。
如果你的樣式全部不生效，首先確認關聯了樣式表沒有，或者關聯的樣式位置、名字是否正確
<link rel="stylesheet" href="css/index.css"/>樣式表儲存的編碼錯誤
如果懷疑CSS表的編碼錯誤，可以直接將css檔案以utf-8的編碼另存一下檔案就可以了。
選擇器寫錯
1、寫後代子代選擇等，涉及多個標籤，類名、id等，子選擇器的順序、名字等寫錯了，均可能導致出錯；
2、html裡的標籤忘記寫類名、id了，而選擇器用了這些漏寫的類名、id等，樣式自然不會生效。
3、後代選擇器有沒有寫上空格；
4、像 div.box{} 這類選擇器會不會寫成了 div .box{}，即多寫了一個空格
語法錯誤
以谷歌瀏覽器的開發者工具為例，一般語法錯誤會顯示為該樣式被劃去，樣式左側有圖示提示，滑鼠移入會顯示英文提示。如下圖所示：
一般語法錯誤有：
1、寫錯屬性名，屬性值不符合規範；
2、以下符號使用了中文或者全形符號：
，；｛｝：3、html標籤沒寫完整，漏了“<”或者”>”等
樣式被層疊
如果是層疊導致的話，則需要提高樣式的優先順序。
常用的方法有：往選擇器中新增元素，提高其特指度，或者在樣式分號前空格加!important，如下：
background-color: pink !important;CSS樣式不生效往往是由於一些細微的地方導致的，希望本篇文章能幫助你快速找到錯誤。各位如果有所補充的也歡迎留言，一起共同進步。