前端進(jìn)階：CSS權(quán)重知多少

CSS權(quán)重

創(chuàng)新互聯(lián)建站是一家專注于網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作與策劃設(shè)計(jì),甕安網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設(shè)十多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:甕安等地區(qū)。甕安做網(wǎng)站價(jià)格咨詢:13518219792

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

權(quán)重的等級(jí)

可以把樣式的應(yīng)用方式分為幾個(gè)等級(jí)，按照等級(jí)來計(jì)算權(quán)重

1、!important，加在樣式屬性值后，權(quán)重值為 10000

2、內(nèi)聯(lián)樣式，如：style=””，權(quán)重值為1000

3、ID選擇器，如：#content，權(quán)重值為100

4、類，偽類和屬性選擇器，如： content、:hover 權(quán)重值為10

5、標(biāo)簽選擇器和偽元素選擇器，如：div、p、:before 權(quán)重值為1

6、通用選擇器（*）、子選擇器（）、相鄰選擇器（+）、同胞選擇器（~）、權(quán)重值為0

4.CSS選擇器與權(quán)重關(guān)系

選擇器整體分為5大類：

? ? 基本選擇器、層次選擇器、偽類選擇器、屬性選擇器、偽對(duì)象（偽元素）選擇器。

2.偽類選擇器

（1）內(nèi)聯(lián)樣式表的優(yōu)先級(jí)別最高；

（2）內(nèi)部樣式表與外部樣式表的優(yōu)先級(jí)和書寫的順序有關(guān)，后書寫的優(yōu)先級(jí)別高；

（3）同在一個(gè)樣式表中的優(yōu)先級(jí)和書寫的順序也有關(guān)，后書寫的優(yōu)先級(jí)別高。(被覆蓋的只是相同屬性的樣式)。

css中權(quán)重關(guān)系是怎樣的？

css樣式表的權(quán)重關(guān)系：

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

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

!important - 當(dāng)前聲明具有最高權(quán)重！

語法：background:red!important;

id選擇器class選擇器標(biāo)簽選擇器通配選擇器

CSS 選擇器權(quán)重計(jì)算規(guī)則

權(quán)重計(jì)算規(guī)則

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

2.第二等：代表ID選擇器，如：#content，權(quán)值為0100。

3.第三等：代表類，偽類和屬性選擇器，如.content，權(quán)值為0010。

4.第四等：代表類型選擇器和偽元素選擇器，如div p，權(quán)值為0001。

5.通配符、子選擇器、相鄰選擇器等的。如*、、+,權(quán)值為0000。

6.繼承的樣式?jīng)]有權(quán)值。

例外：!important 的作用是提升優(yōu)先級(jí)，換句話說。加了這句的樣式的優(yōu)先級(jí)是最高的（比內(nèi)聯(lián)樣式的優(yōu)先級(jí)還高)。

css的優(yōu)先級(jí)是什么,權(quán)重如何計(jì)算

（1） 優(yōu)先級(jí)就近原則，同權(quán)重以最近者為準(zhǔn) 載入樣式以最后載入的樣式為準(zhǔn)；

同權(quán)重下：內(nèi)聯(lián)樣式表（標(biāo)簽內(nèi)部） 嵌入樣式表（當(dāng)前文件） 外部樣式表（外部文件）

！import id class tag

Import比內(nèi)聯(lián)樣式優(yōu)先級(jí)高

層疊重要度次序：

帶有important的用戶樣式

帶有important的作者樣式

作者樣式

用戶樣式

瀏覽器/用戶代理應(yīng)用的樣式

（2） 權(quán)重分為a b c d ，4個(gè)等級(jí)，每個(gè)等級(jí)以10為基數(shù)分別是

內(nèi)聯(lián)樣式（或行內(nèi)樣式）a=1

b = ID選擇器個(gè)數(shù)

c = 類、偽類和屬性選擇器的個(gè)數(shù)

d = 元素選擇器和偽元素選擇器的個(gè)數(shù)

CSS權(quán)重是如何分配的

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

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

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

第二等：代表ID選擇器，如：#content，權(quán)值為100。

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

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

最后把這些值加起來，再就是當(dāng)前元素的權(quán)重了。

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

1，如果樣式上加有!important標(biāo)記，例如：

p{?color:?gray?!important}

那么始終采用這個(gè)標(biāo)記的樣式。

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

可以看到，CSS權(quán)重只是決定應(yīng)用哪個(gè)樣式的其中一個(gè)步驟，不過這個(gè)步驟是最復(fù)雜的，上面已經(jīng)說過了。

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

h1?{color:?blue}

h1?{color:?red}

最終勝出的是color: red。

當(dāng)前名稱：css內(nèi)聯(lián)樣式權(quán)重,css 內(nèi)聯(lián)樣式
URL標(biāo)題：http://chinadenli.net/article33/dseogps.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、品牌網(wǎng)站設(shè)計(jì)、定制開發(fā)、自適應(yīng)網(wǎng)站、小程序開發(fā)、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)