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

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

創(chuàng)新互聯(lián)專注于東光企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),商城系統(tǒng)網(wǎng)站開發(fā)。東光網(wǎng)站建設(shè)公司,為東光等地區(qū)提供建站服務(wù)。全流程按需搭建網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

圖里是英文的，我翻譯過來分別說一下，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。

CSS中權(quán)重的優(yōu)先級(jí)是什么？

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

從CSS代碼存放位置看權(quán)重優(yōu)先級(jí)：內(nèi)嵌樣式??內(nèi)部樣式表??外聯(lián)樣式表。其實(shí)這個(gè)基本可以忽視之，大部分情況下CSS代碼都是使用外聯(lián)樣式表。

從樣式選擇器看權(quán)重優(yōu)先級(jí)：important??內(nèi)嵌樣式??ID??類??標(biāo)簽?|?偽類?|?屬性選擇??偽對(duì)象??繼承??通配符。

important的權(quán)重為1,0,0,0

ID的權(quán)重為0,1,0,0

類的權(quán)重為0,0,1,0

標(biāo)簽的權(quán)重為0,0,0,1

偽類的權(quán)重為0,0,1,0

屬性的權(quán)重為0,0,1,0

偽對(duì)象的權(quán)重為0,0,0,1

通配符的權(quán)重為0,0,0,0

html

head

style?type="text/css"

#left{color:black!important;}?????????/*1,1,0,0*/

#container?#left{color:red;}?????????/*0,2,0,0*/

#left{color:green!important;}???????/*1,1,0,0*/

.container?#left{color:blue;}??????/*0,1,1,0*/

/style

/head

body

div?class="container"?id="container"

span?id="left"這到底是什么顏色?。?span

/div

/body

/html

css演示各種定義的權(quán)重值？

以下是權(quán)重的規(guī)則：標(biāo)簽的權(quán)重為1，class的權(quán)重為10，id的權(quán)重為100，以下例子是演示各種定義的權(quán)重值：

/*權(quán)重為1*/

div{

}

/*權(quán)重為10*/

.class1{

}

/*權(quán)重為100*/

#id1{

}

/*權(quán)重為100+1=101*/

#id1 div{

}

/*權(quán)重為10+1=11*/

.class1 div{

}

/*權(quán)重為10+10+1=21*/

.class1 .class2 div{

}

如果權(quán)重相同，則最后定義的樣式會(huì)起作用，但是應(yīng)該避免這種情況出現(xiàn)

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的優(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)重計(jì)算方法【CSS教程】

層疊性 是指多種CSS樣式的疊加，也是瀏覽器處理沖突的一個(gè)能力，如果一個(gè)屬性通過兩個(gè)相同選擇器設(shè)置到同一個(gè)元素上，那么這個(gè)時(shí)候一個(gè)屬性就會(huì)將另一個(gè)屬性層疊掉。

定義CSS樣式時(shí)，經(jīng)常出現(xiàn)兩個(gè)或更多規(guī)則應(yīng)用在同一元素上

·選擇器相同，則執(zhí)行層疊性

·選擇器不同，就會(huì)出現(xiàn)優(yōu)先級(jí)的問題，就會(huì)涉及CSS權(quán)重計(jì)算。

下面我們?cè)斀饨榻B CSS層疊性權(quán)重計(jì)算方法。

1) 權(quán)重計(jì)算公式

關(guān)于CSS權(quán)重，我們需要一套計(jì)算公式來去計(jì)算，這個(gè)就是 CSS Specificity(特殊性)

值從左到右，左面的最大，一級(jí)大于一級(jí)，數(shù)位之間沒有進(jìn)制，級(jí)別之間不可超越。

·關(guān)于CSS權(quán)重，我們需要一套計(jì)算公式來去計(jì)算，這個(gè)就是 CSS Specificity(特殊性)

2) 權(quán)重疊加

我們經(jīng)常用交集選擇器，后代選擇器等，是有多個(gè)基礎(chǔ)選擇器組合而成，那么此時(shí)，就會(huì)出現(xiàn)權(quán)重疊加。

就是一個(gè)簡(jiǎn)單的加法計(jì)算

div ul li ------ 0,0,0,3

.nav ul li ------ 0,0,1,2

a:hover -----— 0,0,1,1

.nav a ------ 0,0,1,1

注意：

數(shù)位之間沒有進(jìn)制 比如說： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不會(huì)存在10個(gè)div能趕上一個(gè)類選擇器的情況。

3) 繼承的權(quán)重是0

這個(gè)不難，但是忽略很容易繞暈。其實(shí)，我們修改樣式，一定要看該標(biāo)簽有沒有被選中。

1) 如果選中了，那么以上面的公式來計(jì)權(quán)重。誰大聽誰的。

2) 如果沒有選中，那么權(quán)重是0，因?yàn)槔^承的權(quán)重為0。

前端入門; Web前端HTML5+CSS3+移動(dòng)Web前端全套