卡卡網(wǎng)

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

實(shí)例

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

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

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

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

CSS

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

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

demodownload

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

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

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

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

demodownload

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

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

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

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

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

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

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

demodownload

我們看到，這個類.footer的CSS定義是起作用的。

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

我們再看看下面的實(shí)例。

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

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

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

demodownload

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

總結(jié)

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

相關(guān)文章

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

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

標(biāo)簽: CSS類無效  css  id選擇器  類選擇器  標(biāo)簽選擇器