四個(gè)步驟看CSS計(jì)算每一個(gè)樣式屬性的權(quán)重

1、四個(gè)步驟看css計(jì)算每一個(gè)樣式屬性的權(quán)重第一步，遍歷全部挑選器掃瞄器在渲染某個(gè)html元素時(shí)，首先會(huì)尋覓全部作用在該元素上的有效css挑選器，為此，它按照指定的媒體類型（media type）遍歷全部的樣式表來(lái)源，挑選器的來(lái)源包括：用戶代理（掃瞄器）樣式、作者樣式和用戶樣式。常用的media type包括all/screen/print，可以通過(guò)如下的方式定義：掃瞄器樣式也就是掃瞄器自身設(shè)置用來(lái)顯示網(wǎng)站的默認(rèn)樣式，不同的掃瞄器可能有不同的樣式表，例如chrome和ie、firefox的就不一樣，所以大家分離用法這些掃瞄器拜訪同一個(gè)網(wǎng)站的時(shí)候，看到實(shí)際效果可能就不盡相同。用戶樣式掃瞄器還允許用戶

2、設(shè)置網(wǎng)頁(yè)的樣式，例如，我們用ie掃瞄網(wǎng)站的時(shí)候，都可以通過(guò)掃瞄器查看菜單下的樣式或者文字大小子菜單來(lái)設(shè)置網(wǎng)頁(yè)實(shí)際的顯示效果。其次步，比較樣式屬性的重要性通常狀況下，作者樣式具有最高的重要性，第二是用戶樣式，最后才是掃瞄器樣式，但是假如浮現(xiàn)了!important標(biāo)志的話，那么規(guī)章會(huì)被轉(zhuǎn)變，通過(guò)!important 可以提高某種樣式的重要性，讓它的優(yōu)先級(jí)高于其他沒(méi)有加該聲明的全部樣式。下面是樣式屬性的重要性挨次（由高至低）：1. 標(biāo)志為!important的作者樣式2. 標(biāo)志為!important的用戶樣式3. 作者樣式4. 用戶樣式5. 掃瞄器（用戶代理）的默認(rèn)樣式第三步，比較樣式屬性的詳細(xì)性(

3、specificity)詳細(xì)性可以通過(guò)一個(gè)簡(jiǎn)化易用的1000法則來(lái)計(jì)算內(nèi)聯(lián)樣式（inline styling） 權(quán)重 1000id（id） 權(quán)重 100類（.class） 權(quán)重 10標(biāo)簽（tag） 權(quán)重 1然后你可以把多個(gè)挑選器的權(quán)值相加，來(lái)得到終于的specificity：p 詳細(xì)性 1 (1個(gè)標(biāo)簽挑選器)div p 詳細(xì)性 2 (2個(gè)標(biāo)簽挑選器, 1+1)tree 詳細(xì)性 10 (1個(gè)類挑選器)div p.tree 詳細(xì)性 12 (2個(gè)標(biāo)簽挑選器 + 1個(gè)類挑選器, 1+1+10)baobab 詳細(xì)性 100 (1個(gè)id挑選器)body content .alternative p 詳細(xì)性 112 (標(biāo)簽挑選器 + id挑選器 + class挑選器 + 標(biāo)簽挑選器, 1+100+10+1)挑選器詳細(xì)性的完整計(jì)算公式要比上面復(fù)雜得多，但了解上面的法則在普通狀況下已經(jīng)足夠。第四步，推斷樣式屬性浮現(xiàn)的先后挨次這一步最容易，浮現(xiàn)晚的挑選器將擁有高優(yōu)先級(jí)，也就是后來(lái)者居上。對(duì)于外部引入的樣式表，import比link擁有更高的優(yōu)先級(jí)，不管它是否浮現(xiàn)在link引入之后。理解了上述的優(yōu)先級(jí)計(jì)算規(guī)章，我們應(yīng)當(dāng)可以判斷出前面例子中p元素的終于色彩：introduction color: red;.