卡卡網(wǎng)

定義了某個(gè)標(biāo)簽用的CSS類(lèi)，結(jié)果發(fā)現(xiàn)不起作用，原因其實(shí)很明顯，就是另外還有與之相關(guān)聯(lián)的CSS定義，如果頁(yè)面用到的CSS比較多且凌亂，那么檢查起來(lái)就比較困難。CSS類(lèi)不起作用的原因，其實(shí)就是繼承與優(yōu)先的問(wèn)題。今天我將通過(guò)幾個(gè)實(shí)例來(lái)分析這個(gè)問(wèn)題。

實(shí)例

下面是一個(gè)完整的HTML實(shí)例。

HTML結(jié)構(gòu)

<div class="wrap">
  <div class="content">
    <a href="http://www.howtostagehomes.com/">content - 卡卡網(wǎng) www.howtostagehomes.com</a>
  </div>

  <div class="footer">
    <a href="http://www.howtostagehomes.com/">footer - 卡卡網(wǎng) www.howtostagehomes.com</a>
  </div>
</div>

CSS

div.wrap a{color: blue;}
div.content a{color: red;}
.footer a{color: red;}

由于外層div的類(lèi).wrap已經(jīng)定義了鏈接的顏色為blue。而我想在內(nèi)層.footer的div把鏈接顏色設(shè)置為red。但代碼執(zhí)行結(jié)果不在預(yù)期，顯示如下：

demodownload

我們看到，內(nèi)層定義的類(lèi).footer不起作用了。但同時(shí)又看到，另一個(gè)內(nèi)層.content的div，其CSS的定義是有效的。為什么會(huì)出現(xiàn)這個(gè)情況呢？寫(xiě)法的差異！

CSS類(lèi)不起作用的原因：繼承與優(yōu)先

實(shí)例中，.footer類(lèi)名前，沒(méi)有加上標(biāo)簽div，而.content類(lèi)名前，加上了div標(biāo)簽。就是這個(gè)原因?qū)е铝藢?shí)例中的顯示結(jié)果。

如果想.footer類(lèi)的div，按預(yù)期的想法來(lái)顯示，那么就要把類(lèi)名改一下寫(xiě)法，把.footer改為div.footer，我們看看改后的顯示結(jié)果。

demodownload

CSS定義優(yōu)先比較：id、標(biāo)簽與類(lèi)名

CSS定義可以用標(biāo)簽，例如p、div，span等，也可以用類(lèi)名，例如.wrap 、.content，.footer等，還經(jīng)常用到id來(lái)作為選擇器，例如#header，#nav等。在實(shí)際使用中，經(jīng)常出現(xiàn)多個(gè)CSS定義重疊作用的問(wèn)題。這種情況下，瀏覽器渲染時(shí)就會(huì)按照CSS繼承與優(yōu)先的規(guī)則來(lái)執(zhí)行。

用了標(biāo)簽定義CSS，再用類(lèi)定義還有效嗎？

我們看看下面一個(gè)實(shí)例。

<style type="text/css">
div a{color: blue;}
.footer a{color: red;}
</style>

<div class="footer">
  <a href="http://www.howtostagehomes.com/">footer - 卡卡網(wǎng) www.howtostagehomes.com</a>
</div>

已經(jīng)有了div的CSS定義，在HTML里，某個(gè)div比較特殊，又自己加了個(gè)類(lèi)定義.footer。結(jié)果顯示如下：

demodownload

我們看到，這個(gè)類(lèi).footer的CSS定義是起作用的。

id與類(lèi)名，哪個(gè)更優(yōu)先？

我們?cè)倏纯聪旅娴膶?shí)例。

<style type="text/css">
  #wrap a{color: blue;}
  .footer a{color: red;}
</style>

<div id="wrap">
  <div class="footer">
    <a href="http://www.howtostagehomes.com/">footer - 卡卡網(wǎng) www.howtostagehomes.com</a>
  </div>
</div>

先有了#wrap的定義，再有.footer的定義。結(jié)果顯示這樣。

demodownload

可以看到，針對(duì)id的CSS定義#wrap，是優(yōu)先于使用類(lèi)名的CSS定義.footer的。

總結(jié)

通過(guò)本文幾個(gè)實(shí)例的分析，對(duì)CSS定義的繼承與優(yōu)先應(yīng)該有了一定的了解，就是越具體越優(yōu)先，并且遵循如下規(guī)則：id選擇器 > 類(lèi)選擇器 > 標(biāo)簽選擇器。

相關(guān)文章

• 4個(gè)實(shí)例演示——美化表單input輸入框CSS樣式
• 6款CSS性能檢測(cè)、審計(jì)(audit)工具
• 4款CSS 3D按鈕點(diǎn)擊過(guò)渡效果
• 純CSS實(shí)現(xiàn)具有漸變和圓角的彩色邊框
• 10款純CSS Tabs選項(xiàng)卡【實(shí)例演示/源碼下載】
• CSS+SVG：畫(huà)圓并且文字寫(xiě)在圓中間
• CSS實(shí)現(xiàn)自右向左的豎向文字排布
• CSS+SVG實(shí)現(xiàn)環(huán)形/圓環(huán)文字效果【簡(jiǎn)單實(shí)例】
• 純CSS實(shí)現(xiàn)環(huán)形文字效果
• css text-shadow 輕松實(shí)現(xiàn)文字投影/描邊/浮雕/剪紙/發(fā)光效果

• 純CSS：點(diǎn)擊輸入框時(shí)，標(biāo)簽（占位符）浮動(dòng)可見(jiàn)
• 純CSS實(shí)現(xiàn)文字漸變和文字掃光動(dòng)畫(huà)效果
• 強(qiáng)！純CSS實(shí)現(xiàn)彈窗功能，不用JS
• CSS實(shí)現(xiàn)：固定Table表頭和表腳
• 純CSS制作各種Charts圖
• CSS實(shí)現(xiàn)文字顏色漸變效果
• CSS 32個(gè)鼠標(biāo)形狀cursor屬性
• CSS 15個(gè)長(zhǎng)度單位使用區(qū)別
• CSS單位PX、EM、REM、%、VW 和 VH 有什么區(qū)別？
• CSS:讓內(nèi)容(如div/table/圖片等)顯示在網(wǎng)頁(yè)body中間

標(biāo)簽: CSS類(lèi)無(wú)效  css  id選擇器  類(lèi)選擇器  標(biāo)簽選擇器