css樣式不起作用是什么原因?


在寫頁面時,有時會發現自己寫的css樣式無法生效,我們該如何排查css樣式無法生效?常見的css樣式不起作用的原因有哪些呢?下面我們就來看一下css樣式不起作用的原因。

排查css樣式不起作用的方法步驟:

首先,先試一下清除緩存,重啟瀏覽器等手段,無效后再進行進一步排查。

接着按以下流程排查:

以下是排查以及修改方法:

再次提醒在排查前先試一下清除緩存,重啟瀏覽器等手段,無效后再進行進一步排查。有可能自己什么都沒有做錯,就是因為緩存或者瀏覽器的問題導致,重置一下也許問題就解決了。

css樣式不起作用的常見原因:

 

1、未關聯外部樣式表

這是一個讓人很無語的錯誤,但我以前確實遇到過,辛辛苦苦寫好了代碼,發現一個樣式都沒有生效,傻乎乎地忙活了半天,最后居然發現自己忘了關聯外部樣式,當時我的心情,真是。。

如果你的樣式全部不生效,首先確認關聯了樣式表沒有,或者關聯的樣式位置、名字是否正確

<link rel="stylesheet" href="css/index.css"/>

 

2、樣式表保存的編碼錯誤

如果懷疑CSS表的編碼錯誤,可以直接將css文件以utf-8的編碼另存一下文件就可以了。

 

3、選擇器寫錯

  • 寫后代子代選擇等,涉及多個標簽,類名、id等,子選擇器的順序、名字等寫錯了,均可能導致出錯;

  • html里的標簽忘記寫類名、id了,而選擇器用了這些漏寫的類名、id等,樣式自然不會生效。

  • 后代選擇器有沒有寫上空格;

  • 像 div.box{} 這類選擇器會不會寫成了 div .box{},即多寫了一個空格

 

4、語法錯誤

以谷歌瀏覽器的開發者工具為例,一般語法錯誤會顯示為該樣式被划去,樣式左側有圖標提示,鼠標移入會顯示英文提示。如下圖所示:

一般語法錯誤有:
1、寫錯屬性名,屬性值不符合規范;
2、以下符號使用了中文或者全角符號:

,;{}:

3、html標簽沒寫完整,漏了“<”或者”>”等

豌豆資源搜索網站https://55wd.com 電腦刺綉綉花廠 ttp://www.szhdn.com

5、樣式被層疊

如果是層疊導致的話,則需要提高樣式的優先級。

常用的方法有:往選擇器中添加元素,提高其特指度,或者在樣式分號前空格加!important,如下:

background-color: pink !important;


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM