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

    贊助商

    分類目錄

    贊助商

    最新文章

    搜索

    CSS中id、類、標簽的優先級是怎樣的?

    作者:admin    時間:2022-11-30 11:30:14    瀏覽:

    CSS我們可以用標簽、id、類來定義,然而,當某一個元素同時擁有這三個CSS定義時,瀏覽器渲染時該選擇哪一個呢?這就涉及到它們的優先級問題。本文將通過示例,來說明這個問題。

    示例

    完整HTML

    <html>
    <head>
    <title>div</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style>
    div {
      color: red;
    }

    .class {
      color: blue;
    }

    #id {
      color: yellow; 
    }

    body {
      background: #333;
      display: grid;
      font-size: 50px;
      height: 100vh;
      place-items: center;
    }
    </style>
    </head>

    <body>

    <div id="id" class="class">卡卡測速網 WebKaka.com</div>
      
    </body>
    </html>

    demodownload

    執行結果

    分析

    div元素有兩個屬性:id="id"class="class"。

    CSS定義了三個樣式:div、#id.class,它們設置了color屬性,divred(紅色),.classblue(藍色),#idyellow(黃色)。

    從執行結果來看,文字顏色為黃色,所以可以斷定,#id的優先級最高。

    如果把div的id屬性去掉,HTML代碼改為: 

    <div class="class">卡卡測速網 WebKaka.com</div>

    那么結果又會怎樣呢?

    執行結果

     

    結果文字顏色為藍色,所以可以斷定,.class的優先級要比標簽div高。

    至此,我們可以清楚的知道了,CSS中id、類、標簽的優先級順序是:id > 類 > 標簽。

    使用 !important ,優先級別最高

    下面一個例子,使得div的CSS優先級別最高,因為使用了 !important 屬性值。

    完整HTML

    <html>
    <head>
    <title>div</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style>
    div {
      color: red !important;
    }

    .class {
      color: blue;
    }

    #id {
      color: yellow; 
    }

    body {
      background: #333;
      display: grid;
      font-size: 50px;
      height: 100vh;
      place-items: center;
    }
    </style>
    </head>

    <body>

    <div id="id" class="class">卡卡測速網 WebKaka.com</div>
      
    </body>
    </html>

    demodownload

    執行結果

    分析

    文字顏色為紅色,故使用的是CSS中div的定義。

    CSS中div的屬性使用了red !important;,這使得div的CSS定義一下子把優先權提升到了最高的級別,所以就出現這樣的執行結果。

    總結

    本文通過多個示例,說明了CSS中id、類、標簽的優先級問題,但是我們可以使用一些手段把某個CSS的定義的優先級提高。

    相關文章

    標簽: css  css3  
    x
    • 站長推薦
    国产成年女人人AA人视频看看-婷婷黄色视频-一女被两男吃奶添下A片免费-欧美黑人又粗又大高潮喷水