<samp id="wiaeu"><label id="wiaeu"></label></samp>
  • <samp id="wiaeu"><label id="wiaeu"></label></samp>
    <samp id="wiaeu"></samp>
  • <samp id="wiaeu"><sup id="wiaeu"></sup></samp>
  • 技術頻道導航
    HTML/CSS
    .NET技術
    IIS技術
    PHP技術
    Js/JQuery
    Photoshop
    Fireworks
    服務器技術
    操作系統
    網站運營

    贊助商

    分類目錄

    贊助商

    最新文章

    搜索

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

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

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

    實例

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

    HTML結構

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

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

    CSS

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

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

     

    demodownload

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

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

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

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

     

    demodownload

    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://www.organiccannabisseed.com/">footer - 卡卡網 www.organiccannabisseed.com</a>
    </div>

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

     

    demodownload

    我們看到,這個類.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://www.organiccannabisseed.com/">footer - 卡卡網 www.organiccannabisseed.com</a>
      </div>
    </div>

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

     

    demodownload

    可以看到,針對id的CSS定義#wrap,是優先于使用類名的CSS定義.footer的。

    總結

    通過本文幾個實例的分析,對CSS定義的繼承與優先應該有了一定的了解,就是越具體越優先,并且遵循如下規則:id選擇器 > 類選擇器 > 標簽選擇器。

    相關文章

    • IT熱文
    • 站長推薦
    公与熄电影手婬之手,日本少妇毛多水多的视频,要看肉感BBwBBWBBWBBw高清
    <samp id="wiaeu"><label id="wiaeu"></label></samp>
  • <samp id="wiaeu"><label id="wiaeu"></label></samp>
    <samp id="wiaeu"></samp>
  • <samp id="wiaeu"><sup id="wiaeu"></sup></samp>