CSS中的權重

元素會被多個樣式一層層作用，這就是層疊樣式表的來源。如果多個樣式作用在元素上就會產生優(yōu)先級權重的問題。

網站建設哪家好，找創(chuàng)新互聯(lián)！專注于網頁設計、網站建設、微信開發(fā)、微信小程序開發(fā)、集團企業(yè)網站建設等服務項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了倉山免費建站歡迎大家使用！

零、屬性后面使用!important，權重最大，會覆蓋頁面內任何位置定義的元素樣式。

一、內聯(lián)樣式，權重為1000【寫在HTML元素的style屬性中】

二、ID選擇器，權重為0100【非內聯(lián)樣式】

三、類、偽類、屬性選擇器，權重為0010【非內聯(lián)樣式】

四、標簽、偽元素選擇器，權重為0001【非內聯(lián)樣式】

五、通配符、子選擇器、相鄰選擇器等，權重為0000【非內聯(lián)樣式】

六、繼承的樣式沒有權重

注意

沒有權重 和 權重為0 ， 權重為0 的權重比 沒有權重 的大，優(yōu)先級高

1、 選擇器中 ID選擇器 的權重【a = 數(shù)量 * 權重】

2、 選擇器中 類、偽類、屬性選擇器 的權重【b = 數(shù)量 * 權重】

3、 選擇器中 標簽、偽元素選擇器 的權重【c = 數(shù)量 * 權重】

4、 最終的權重w = a + b + c

運行截圖

width：寬度【塊級元素的會繼承父類的內容寬度contentwidth，】

color：字體的顏色

CSS權重是如何分配的

CSS權重是由四個數(shù)值決定，看一張圖比較好解釋：

圖里是英文的，我翻譯過來分別說一下，4個等級的定義如下：

第一等：代表內聯(lián)樣式，如: style=””，權值為1000。

第二等：代表ID選擇器，如：#content，權值為100。

第三等：代表類，偽類和屬性選擇器，如.content，權值為10。

第四等：代表類型選擇器和偽元素選擇器，如div p，權值為1。

最后把這些值加起來，再就是當前元素的權重了。

權重算出來了，但是某個元素到底用哪個樣式，還有3個規(guī)則,：

1，如果樣式上加有!important標記，例如：

p{?color:?gray?!important}

那么始終采用這個標記的樣式。

2，匹配的內容按照CSS權重排序，權重大的優(yōu)先；

可以看到，CSS權重只是決定應用哪個樣式的其中一個步驟，不過這個步驟是最復雜的，上面已經說過了。

3，如果權重也一樣，按照它在CSS樣式表里聲明的順序，后聲明的優(yōu)先，例如：

h1?{color:?blue}

h1?{color:?red}

最終勝出的是color: red。

css中權重關系是怎樣的？

css樣式表的權重關系：

內聯(lián)樣式表的權重最大！

內部和外部樣式的權重，和書寫的前后順序有關。（放在后面的會把放在前面的樣式覆蓋掉,覆蓋的只是相同屬性的樣式，不同屬性的樣式會繼續(xù)執(zhí)行。）

!important - 當前聲明具有最高權重！

語法：background:red!important;

id選擇器class選擇器標簽選擇器通配選擇器

前端進階：CSS權重知多少

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

如何理解css樣式表的層疊性和優(yōu)先級

可以有三種理解方式，如下：

一：層疊性指的是樣式的優(yōu)先級，當產生沖突時以優(yōu)先級高的為準。

開發(fā)者樣式讀者樣式瀏覽器樣式（除非使用!important標記 ）

id選擇符（偽）類選擇符元素選擇符

權重相同時取后面定義的樣式

二：

CSS層疊性是指CSS樣式在針對同一元素配置同一屬性時，依據(jù)層疊規(guī)則（權重）來處理沖突，選擇應用權重高的CSS選擇器所指定的屬性，一般也被描述為權重高的覆蓋權重低的，因此也稱作層疊。每個CSS選擇器都會有一個權重，當兩個選擇器同時配置同一元素的同一屬性時（比如一個設置color：red，另一個color：black），就會產生沖突，而解決沖突的方案就是CSS選擇器的權重，權重高的來覆蓋權重低的。

三：層疊性指的是上級標簽的樣式會自動繼承到其所有下級標簽，如針對body設置的標簽選擇器所設的字體樣式會自動應用到body下的p中，除非p重寫了相關樣式將其覆蓋。