本篇內(nèi)容介紹了“如何理解權(quán)重和層疊規(guī)則決定了CSS樣式優(yōu)先級(jí)”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

成都創(chuàng)新互聯(lián)公司是網(wǎng)站建設(shè)專家,致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營(yíng)銷，專業(yè)領(lǐng)域包括成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、電商網(wǎng)站制作開發(fā)、微信平臺(tái)小程序開發(fā)、微信營(yíng)銷、系統(tǒng)平臺(tái)開發(fā)，與其他網(wǎng)站設(shè)計(jì)及系統(tǒng)開發(fā)公司不同，我們的整合解決方案結(jié)合了恒基網(wǎng)絡(luò)品牌建設(shè)經(jīng)驗(yàn)和互聯(lián)網(wǎng)整合營(yíng)銷的理念，并將策略和執(zhí)行緊密結(jié)合，且不斷評(píng)估并優(yōu)化我們的方案，為客戶提供全方位的互聯(lián)網(wǎng)品牌整合方案！

代碼如下:

一、基本的優(yōu)先級(jí)規(guī)則

比較同一級(jí)別的個(gè)數(shù)，數(shù)量多的優(yōu)先級(jí)高，如果相同即比較下一級(jí)別的個(gè)數(shù)，至于各級(jí)別的優(yōu)先級(jí)如下：

important > 內(nèi)聯(lián) > ID > 類 > 標(biāo)簽 | 偽類 | 屬性選擇 > 偽對(duì)象 > 通配符 > 繼承

二、CSS權(quán)重規(guī)則

在《頁(yè)面重構(gòu)中的模塊化設(shè)計(jì)》中提到，影響CSS樣式權(quán)重，有兩個(gè)重要因素：

A：樣式的優(yōu)先級(jí)跟樣式定義的順序有關(guān)

B：權(quán)值的大小跟選擇器的類型和數(shù)量有關(guān)

一般來說，在同一個(gè)CSS文件中，如果有兩個(gè)同名的樣式，則后定義的會(huì)覆蓋先定義的。選擇器類型的優(yōu)先級(jí)見(一)。

那么，CSS的權(quán)重是怎么算的呢？

一個(gè)selector的權(quán)重表示方式：0.0.0.0，按照計(jì)算規(guī)則給每位填充數(shù)字，對(duì)應(yīng)位置相等，則比較下一位。

權(quán)重的計(jì)算規(guī)則如下：（為方便，用A.B.C.D代替各位置的值）

1、內(nèi)嵌樣式：A=1，B=C=D=0（即1.0.0.0）

2、ID樣式：selector中帶幾個(gè)ID,第2位就加幾個(gè)1 如#header{color:red}，就是A=C=D=0,B=1(即0.1.0.0)

3、類,偽類,以及屬性的個(gè)數(shù)就是第三位的值：

.a.b[type="text"]:hover{}，選擇器中有2個(gè)類,1個(gè)屬性,1個(gè)偽類,所以它的第3位為4, A=B=D=0,C=4,(即0.0.4.0)

4、偽元素和標(biāo)簽元素的個(gè)數(shù)就是第四位的值

p:first-letter，有一個(gè)標(biāo)簽元素p和偽元素first-letter,值為2,A=B=C=0,D=2（即0.0.0.2）

5、通配符和繼承得到的CSS屬性對(duì)權(quán)重沒有影響

三、幾個(gè)示例

針對(duì)以上，看以下幾個(gè)示例

1、.a .b .c {color:red;} //0.0.3.0 說明：只有三個(gè)類

2、*{…} //0.0.0.0 說明：通配符對(duì)權(quán)重沒有影響

3、.a .b a {color:green} //0.0.2.1 說明：兩個(gè)類和一個(gè)標(biāo)簽

4、#hid {color:black;} //0.1.0.0 說明：只有一個(gè)ID

“如何理解權(quán)重和層疊規(guī)則決定了CSS樣式優(yōu)先級(jí)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！