青青河边草免费视频大全,奇米影视首页,三年中文在线观看免费大全电视剧!

技術頻道 - html技術

CSS類不起作用？id、類名、標簽選擇器的優先分析

作者:admin 時間:2022-5-6 8:45:48 瀏覽:

定義了某個標簽用的CSS類，結果發現不起作用，原因其實很明顯，就是另外還有與之相關聯的CSS定義，如果頁面用到的CSS比較多且凌亂，那么檢查起來就比較困難。CSS類不起作用的原因，其實就是繼承與優先的問題。今天我將通過幾個實例來分析這個問題。

實例

下面是一個完整的HTML實例。

HTML結構

<div class="wrap">
  <div class="content">
    <a href="http://m.cuckooft.com/">content - 卡卡網 m.cuckooft.com</a>
  </div>

  <div class="footer">
    <a href="http://m.cuckooft.com/">footer - 卡卡網 m.cuckooft.com</a>
  </div>
</div>

CSS

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

由于外層div的類.wrap已經定義了鏈接的顏色為blue。而我想在內層.footer的div把鏈接顏色設置為red。但代碼執行結果不在預期，顯示如下：

demo download

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

CSS類不起作用的原因：繼承與優先

實例中，.footer類名前，沒有加上標簽div，而.content類名前，加上了div標簽。就是這個原因導致了實例中的顯示結果。

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

demo download

CSS定義優先比較：id、標簽與類名

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

用了標簽定義CSS，再用類定義還有效嗎？

我們看看下面一個實例。

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

<div class="footer">
  <a href="http://m.cuckooft.com/">footer - 卡卡網 m.cuckooft.com</a>
</div>

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

demo download

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

id與類名，哪個更優先？

我們再看看下面的實例。

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

<div id="wrap">
  <div class="footer">
    <a href="http://m.cuckooft.com/">footer - 卡卡網 m.cuckooft.com</a>
  </div>
</div>

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