首先，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權重問題例子詳解