僅供學習，轉載請注明出處

CSS權重

CSS權重指的是樣式的優(yōu)先級，有兩條或多條樣式作用于一個元素，權重高的那條樣式對元素起作用,權重相同的，后寫的樣式會覆蓋前面寫的樣式。

權重的等級

可以把樣式的應用方式分為幾個等級，按照等級來計算權重

1、!important，加在樣式屬性值后，權重值為 10000
2、內聯(lián)樣式，如：style=””，權重值為1000
3、ID選擇器，如：#content，權重值為100
4、類，偽類和屬性選擇器，如： content、:hover 權重值為10
5、標簽選擇器和偽元素選擇器，如：div、p、:before 權重值為1
6、通用選擇器（*）、子選擇器（>）、相鄰選擇器（+）、同胞選擇器（~）、權重值為0

權重的計算實例

1、實例一：

<style type="text/css">
    div{
        color:red !important;
    }        
</style>
......
<div style="color:blue">這是一個div元素</div>
<!-- 
兩條樣式同時作用一個div，上面的樣式權重值為10000+1，下面的行間樣式的權重值為1000，
所以文字的最終顏色為red 
-->

上面的例子可以先寫一個內聯(lián)樣式，然后再使用div標簽選擇器，最后再加上!important 參數(shù)來看看效果。

內斂樣式的div

此時可以看到文字已經(jīng)是藍色的了。

使用div標簽選擇器

可以看出，div標簽選擇器的權重很小，所以無法設置紅色覆蓋藍色。

設置權重最高的 !important 參數(shù)

設置了!important參數(shù)之后，字體立即就變?yōu)榧t色了。

2、實例二：

<style type="text/css">
    #content div.main_content h2{
        color:red;    
    }
    #content .main_content h2{
        color:blue;
    }
</style>
......
<div id="content">
    <div class="main_content">
        <h2>這是一個h2標題</h2>
    </div>
</div>
<!-- 
第一條樣式的權重計算： 100+1+10+1，結果為112；
第二條樣式的權重計算： 100+10+1，結果為111；
h2標題的最終顏色為red
-->

實踐開發(fā)情況中，這種樣式權重比較的情況應該是比較少的。但是，也可以用這個例子演示一下。

首先編寫 id選擇器 + 類選擇器 + h2標簽選擇器

在上面樣式選擇的基礎上，再增加一個div標簽選擇器

2019年全套Java、Android、HTML5前端、Python、大數(shù)據(jù)視頻，價值數(shù)萬資源大放送

尋找資源的地址如下：

掃描微信公眾號

尋找價值數(shù)萬的視頻資源