css為什么不起作用及怎么解決

這篇文章主要介紹“css為什么不起作用及怎么解決”，在日常操作中，相信很多人在css為什么不起作用及怎么解決問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”css為什么不起作用及怎么解決”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

css不起作用的原因：1、未關(guān)聯(lián)外部樣式表；2、樣式表保存的編碼錯(cuò)誤；3、選擇器寫錯(cuò)；4、語(yǔ)法錯(cuò)誤，包括屬性名或?qū)傩灾祵戝e(cuò)、符號(hào)使用了中文或者全角符號(hào)、html標(biāo)簽沒(méi)寫完整；5、樣式被層疊。

在寫頁(yè)面時(shí)，有時(shí)會(huì)發(fā)現(xiàn)自己寫的css樣式無(wú)法生效，我們?cè)撊绾闻挪閏ss樣式無(wú)法生效？常見的css樣式不起作用的原因有哪些呢？下面我們就來(lái)看一下css樣式不起作用的原因。

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

首先，先試一下清除緩存，重啟瀏覽器等手段，無(wú)效后再進(jìn)行進(jìn)一步排查。

接著按以下流程排查：

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

再次提醒在排查前先試一下清除緩存，重啟瀏覽器等手段，無(wú)效后再進(jìn)行進(jìn)一步排查。有可能自己什么都沒(méi)有做錯(cuò)，就是因?yàn)榫彺婊蛘邽g覽器的問(wèn)題導(dǎo)致，重置一下也許問(wèn)題就解決了。

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

1、未關(guān)聯(lián)外部樣式表

這是一個(gè)讓人很無(wú)語(yǔ)的錯(cuò)誤，但我以前確實(shí)遇到過(guò)，辛辛苦苦寫好了代碼，發(fā)現(xiàn)一個(gè)樣式都沒(méi)有生效，傻乎乎地忙活了半天，最后居然發(fā)現(xiàn)自己忘了關(guān)聯(lián)外部樣式，當(dāng)時(shí)我的心情，真是。。

如果你的樣式全部不生效，首先確認(rèn)關(guān)聯(lián)了樣式表沒(méi)有，或者關(guān)聯(lián)的樣式位置、名字是否正確

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

2、樣式表保存的編碼錯(cuò)誤

如果懷疑CSS表的編碼錯(cuò)誤，可以直接將css文件以u(píng)tf-8的編碼另存一下文件就可以了。

3、選擇器寫錯(cuò)

• 寫后代子代選擇等，涉及多個(gè)標(biāo)簽，類名、id等，子選擇器的順序、名字等寫錯(cuò)了，均可能導(dǎo)致出錯(cuò)；

• html里的標(biāo)簽忘記寫類名、id了，而選擇器用了這些漏寫的類名、id等，樣式自然不會(huì)生效。

• 后代選擇器有沒(méi)有寫上空格；

• 像 p.box{} 這類選擇器會(huì)不會(huì)寫成了 p .box{}，即多寫了一個(gè)空格

4、語(yǔ)法錯(cuò)誤

以谷歌瀏覽器的開發(fā)者工具為例，一般語(yǔ)法錯(cuò)誤會(huì)顯示為該樣式被劃去，樣式左側(cè)有圖標(biāo)提示，鼠標(biāo)移入會(huì)顯示英文提示。

一般語(yǔ)法錯(cuò)誤有：
1、寫錯(cuò)屬性名，屬性值不符合規(guī)范；
2、以下符號(hào)使用了中文或者全角符號(hào)：

，；｛｝：

3、html標(biāo)簽沒(méi)寫完整，漏了“<”或者”>”等

5、樣式被層疊

如果是層疊導(dǎo)致的話，則需要提高樣式的優(yōu)先級(jí)。

常用的方法有：往選擇器中添加元素，提高其特指度，或者在樣式分號(hào)前空格加!important，如下：

background-color: pink !important;

到此，關(guān)于“css為什么不起作用及怎么解決”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！