css權重問題例子詳解

標籤：ace   標籤   style   層級   html   屬性   margin   div   字型   

首先，id選取器權重層級最高，class選取器其次，html選取器最後。 例子：

<div class="t1" id="one">    <div class="t2" id="two">        <div class="t3" id="three">            <span>嘿嘿嘿</span>        </div>    </div></div>

選中span標籤

當選中span標籤，也可能權重相同，也可能不同，得分下面2種情況。

1.權重相同，誰在後面誰決定。（下面例子嘿嘿嘿的字型顏色為黃色）

<style>    div.t2 span {         color:red;    }    div.t1 span {        color:yellow;    }</style>

2.權重不同，權重大的決定。（下面例子嘿嘿嘿的字型顏色為黃色）

<style>    /**class選取器最進階只有一個**/    div div.t1 span {        color:red;    }    /**id選取器最進階也只有一個，但層級比class高**/    #one span {        color:yellow;    }</style>

沒選中span標籤

如果沒選中span標籤，誰描述得近就誰決定，如果一樣近就再比權重，可以分為下面3種情況。

1.描述得近的決定。（下面例子嘿嘿嘿的字型顏色為黃色）

<style>    /**t3描述得最近**/    .t3 {        color:yellow;    }    #two {        color:red;    }    div.t1 #one {        color:green;    }</style>

2.描述得一樣近，權重不同，權重大的決定。（下面例子嘿嘿嘿的字型顏色為黃色）

<style>    /**多一個html選取器div**/    div.t1 div.t2 {        color:yellow;    }    div.t1 .t2 {        color:red;    }</style>

3.描述得一樣近，權重相同，誰在後面誰決定。（下面例子嘿嘿嘿的字型顏色為紅色）

<style>    div.t1 div.t2 {        color:yellow;    }    div.t1 div.t2 {        color:red;    }</style>

特別的！important

如果在某個屬性後面加個！important，那麼它權重無限大。

下面例子如果不加！important嘿嘿嘿就是紅色，加了後就變成黃色了。

<style>     #two span {        color:red;    }    .t2 span {        color:yellow !important;    }</style>

css權重問題例子詳解