如何查看CSS計(jì)算每一個(gè)樣式屬性的權(quán)重
這篇文章主要介紹如何查看CSS計(jì)算每一個(gè)樣式屬性的權(quán)重，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
創(chuàng)新互聯(lián)是專業(yè)的皮山網(wǎng)站建設(shè)公司，皮山接單;提供成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行皮山網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!
第一步，遍歷所有選擇器
瀏覽器在渲染某個(gè)HTML元素時(shí)，首先會(huì)尋找所有作用在該元素上的有效CSS選擇器，為此，它根據(jù)指定的媒體類型（media type）遍歷所有的樣式表來源，選擇器的來源包括：用戶代理（瀏覽器）樣式、作者樣式和用戶樣式。
常用的media type包括all/screen/print，可以通過如下的方式定義： <link href="style.css" media="screen print" ...>
瀏覽器樣式
也就是瀏覽器自身設(shè)置用來顯示網(wǎng)站的默認(rèn)樣式，不同的瀏覽器可能有不同的樣式表，例如Chrome和IE、Firefox的就不一樣，所以大家分別使用這些瀏覽器訪問同一個(gè)網(wǎng)站的時(shí)候，看到實(shí)際效果可能就不盡相同。
用戶樣式
瀏覽器還允許用戶設(shè)置網(wǎng)頁的樣式，例如，我們用IE瀏覽網(wǎng)站的時(shí)候，都可以通過瀏覽器查看菜單下的樣式或者文字大小子菜單來設(shè)置網(wǎng)頁實(shí)際的顯示效果。
第二步，比較樣式屬性的重要性
通常情況下，作者樣式具有最高的重要性，其次是用戶樣式，最后才是瀏覽器樣式，但是如果出現(xiàn)了!important標(biāo)記的話，那么規(guī)則會(huì)被改變，通過!important可以提高某種樣式的重要性，讓它的優(yōu)先級高于其他沒有加該聲明的所有樣式。下面是樣式屬性的重要性順序（由高至低）：
1.標(biāo)記為!important的作者樣式
2.標(biāo)記為!important的用戶樣式
3.作者樣式
4.用戶樣式
5.瀏覽器（用戶代理）的默認(rèn)樣式
第三步，比較樣式屬性的具體性(Specificity)
具體性可以通過一個(gè)簡化易用的1000法則來計(jì)算
內(nèi)聯(lián)樣式（inline styling） 權(quán)重 1000
ID（#id） 權(quán)重 100
類（.class） 權(quán)重 10
標(biāo)簽（tag） 權(quán)重 1
然后你可以把多個(gè)選擇器的權(quán)值相加，來得到最終的Specificity：
p具體性 1 (1個(gè)標(biāo)簽選擇器)
div p具體性 2 (2個(gè)標(biāo)簽選擇器, 1+1)
tree具體性 10 (1個(gè)類選擇器)
div p.tree具體性 12 (2個(gè)標(biāo)簽選擇器 + 1個(gè)類選擇器, 1+1+10)
#baobab具體性 100 (1個(gè)id選擇器)
body #content .alternative p具體性 112 (標(biāo)簽選擇器 + id選擇器 + class選擇器 +標(biāo)簽選擇器, 1+100+10+1)
選擇器具體性的完整計(jì)算公式要比上面復(fù)雜得多，但了解上面的法則在一般情況下已經(jīng)足夠。
第四步，判斷樣式屬性出現(xiàn)的先后順序
這一步最簡單，出現(xiàn)晚的選擇器將擁有高優(yōu)先級，也就是后來者居上。
對于外部引入的樣式表，@import比link擁有更高的優(yōu)先級，不管它是否出現(xiàn)在link引入之后。
理解了上述的優(yōu)先級計(jì)算規(guī)則，我們應(yīng)該可以推斷出前面例子中p元素的最終顏色：
#introduction{ color: red;}
.message{ color: green;}
p{ color: blue;}
<p class="message" id="introduction">
HTML/CSS高級教程。
</p>
以上是“如何查看CSS計(jì)算每一個(gè)樣式屬性的權(quán)重”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
分享題目：如何查看CSS計(jì)算每一個(gè)樣式屬性的權(quán)重
當(dāng)前URL：http://bm7419.com/article36/gijcpg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、全網(wǎng)營銷推廣、企業(yè)建站、軟件開發(fā)、定制網(wǎng)站、網(wǎng)站建設(shè)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
