摘 要：樣式?jīng)_突是常見(jiàn)的一種需要處理網(wǎng)頁(yè)問(wèn)題！了解樣式?jīng)_突的原理，使用權(quán)重值去計(jì)算那種樣式?jīng)_突會(huì)勝出，是常用的解決這類問(wèn)題的手段。樣式?jīng)_突是把雙刃劍，靈活利用權(quán)重值，改變權(quán)重值，可以讓網(wǎng)頁(yè)始終在設(shè)計(jì)者的控制下。利用權(quán)重值讓想要看到的的樣式勝出，清除瀏覽器，使瀏覽器的默認(rèn)樣式不在打擾設(shè)計(jì)者的思路，是做好網(wǎng)頁(yè)很關(guān)鍵的一步。

關(guān)鍵詞：樣式?jīng)_突 權(quán)重值 CSSreset

一、權(quán)重值的概念和計(jì)算方法

樣式?jīng)_突是使用CSS語(yǔ)言修飾網(wǎng)頁(yè)時(shí)經(jīng)常出現(xiàn)的一種狀況。樣式?jīng)_突比較復(fù)雜，但是它有遵循的原則。通常使用權(quán)重值去計(jì)算在樣式?jīng)_突中，那種樣式會(huì)最終勝出。權(quán)重值的給出依賴于選擇器的類型：標(biāo)簽選擇器的值為1分；類選擇器的值為10分；ID選擇器的值為100分；內(nèi)建樣式的值為1000分（偽元素被瀏覽器當(dāng)做標(biāo)簽選擇器處理，值為1分；偽類被當(dāng)做類選擇器處理，值為10分）。這些值是可以疊加的，例如：

p .email {color ： red；}

這個(gè)選擇器的值為11分：其中標(biāo)簽選擇器1分，類選擇器10分。

當(dāng)出現(xiàn)了樣式?jīng)_突時(shí)，通過(guò)權(quán)重值得疊加計(jì)算，然后比較大小，可以獲知那種樣式會(huì)被瀏覽器最終采用。但也有這樣一種情況：兩個(gè)選擇器的權(quán)重值相同。例如有這樣一段HTML語(yǔ)言：

Witten byJean Graline de Pomme

在CSS樣式表中有這樣兩個(gè)樣式：

p .email { color ： red； } ①

.byline a { color ： blue； } ②

很明顯，這兩個(gè)樣式都對(duì)標(biāo)簽做出了規(guī)定：一個(gè)要求字體為紅色；一個(gè)要求為藍(lán)色。這樣的樣式?jīng)_突使用權(quán)重值去計(jì)算：

① 1（標(biāo)簽選擇器）+10（類選擇器）=11

② 1（類選擇器）+10（標(biāo)簽選擇器）=11

兩個(gè)選擇器的權(quán)重值相同。這種情況下，瀏覽器遵循：“權(quán)重值相同時(shí)最后一個(gè)樣式勝出”[1]的原則。

二、改變權(quán)重值

當(dāng)兩個(gè)樣式生沖突時(shí)，通過(guò)權(quán)重值的計(jì)算，發(fā)現(xiàn)所需要展現(xiàn)的樣式并沒(méi)有勝出。令人感到麻煩的是，這也許不是兩個(gè)簡(jiǎn)單的標(biāo)簽選擇器、類選擇器或者ID選擇器，而是較為復(fù)雜的派生選擇器。比如下例：

明顯地可以看出，類選擇器“.intro”才是設(shè)計(jì)者對(duì)于

標(biāo)簽所希望展現(xiàn)的樣式。但是通過(guò)計(jì)算權(quán)重值，“#sidebar p”的值為101分，而“.intro”的值為10分，也就是說(shuō)，瀏覽器最終會(huì)執(zhí)行“#sidebar p”的樣式，而并非“.intro”的樣式。那么，怎樣才能達(dá)到設(shè)計(jì)者的要求呢？很簡(jiǎn)單，對(duì)樣式表修改如下：

可以看到，只是簡(jiǎn)單地把類選擇器變成了派生選擇器，但是權(quán)重值卻由10分（“.intro”）變成了110分（“#sidebar .intro”）。最終，設(shè)計(jì)者所需要的樣式就勝出了。

CSS語(yǔ)言提供了相當(dāng)多的選擇器供設(shè)計(jì)者使用。諸多地選擇器中，派生選擇器和高級(jí)選擇器的定位方法相當(dāng)?shù)仂`活和準(zhǔn)確，在不發(fā)生樣式?jīng)_突時(shí)，往往針對(duì)一個(gè)元素的定位可以有幾種方式，但它們效果相同。這讓我們產(chǎn)生了錯(cuò)覺(jué)，會(huì)習(xí)慣于使用最簡(jiǎn)單的定位方式（因?yàn)楹?jiǎn)單明了，所以單詞相應(yīng)的也少）。例如：

針對(duì)上面這段HTML語(yǔ)言中的無(wú)序列表里的標(biāo)簽，以下都是有效的選擇器：

li a

body li a

html body li a

html body lu li a

盡管沒(méi)有使用類選擇器或ID選擇器等太復(fù)雜地定位方式，但是依然可以看出，都是對(duì)無(wú)序列表中的標(biāo)簽做出定位，它們的權(quán)重值卻絕不相同。利用派生選擇器等的相對(duì)定位方式，可以靈活地改變權(quán)重值從而達(dá)到相應(yīng)的效果。

參考文獻(xiàn)：

[1]David Sawyer McFarland. 《CSS實(shí)戰(zhàn)手冊(cè)》[M].北京：電子工業(yè)出版社，2010：45、46、75-80

[2]Michael Bowers等.《HTML5與CSS3設(shè)計(jì)模式》[M] .北京：人民郵電出版社，2013： 12-15

作者簡(jiǎn)介：張一馳（1978.10-），男，漢族，內(nèi)蒙古赤峰市人，助教，內(nèi)蒙古交通職業(yè)技術(shù)學(xué)院，主要從事計(jì)算機(jī)網(wǎng)絡(luò)建設(shè)方面的研究。