摘 要：樣式沖突是常見的一種需要處理網頁問題！了解樣式沖突的原理，使用權重值去計算那種樣式沖突會勝出，是常用的解決這類問題的手段。樣式沖突是把雙刃劍，靈活利用權重值，改變權重值，可以讓網頁始終在設計者的控制下。利用權重值讓想要看到的的樣式勝出，清除瀏覽器，使瀏覽器的默認樣式不在打擾設計者的思路，是做好網頁很關鍵的一步。

關鍵詞：樣式沖突 權重值 CSSreset

一、權重值的概念和計算方法

樣式沖突是使用CSS語言修飾網頁時經常出現的一種狀況。樣式沖突比較復雜，但是它有遵循的原則。通常使用權重值去計算在樣式沖突中，那種樣式會最終勝出。權重值的給出依賴于選擇器的類型：標簽選擇器的值為1分；類選擇器的值為10分；ID選擇器的值為100分；內建樣式的值為1000分（偽元素被瀏覽器當做標簽選擇器處理，值為1分；偽類被當做類選擇器處理，值為10分）。這些值是可以疊加的，例如：

p .email {color ： red；}

這個選擇器的值為11分：其中標簽選擇器1分，類選擇器10分。

當出現了樣式沖突時，通過權重值得疊加計算，然后比較大小，可以獲知那種樣式會被瀏覽器最終采用。但也有這樣一種情況：兩個選擇器的權重值相同。例如有這樣一段HTML語言：

Witten byJean Graline de Pomme

在CSS樣式表中有這樣兩個樣式：

p .email { color ： red； } ①

.byline a { color ： blue； } ②

很明顯，這兩個樣式都對標簽做出了規(guī)定：一個要求字體為紅色；一個要求為藍色。這樣的樣式沖突使用權重值去計算：

① 1（標簽選擇器）+10（類選擇器）=11

② 1（類選擇器）+10（標簽選擇器）=11

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

二、改變權重值

當兩個樣式生沖突時，通過權重值的計算，發(fā)現所需要展現的樣式并沒有勝出。令人感到麻煩的是，這也許不是兩個簡單的標簽選擇器、類選擇器或者ID選擇器，而是較為復雜的派生選擇器。比如下例：

明顯地可以看出，類選擇器“.intro”才是設計者對于

標簽所希望展現的樣式。但是通過計算權重值，“#sidebar p”的值為101分，而“.intro”的值為10分，也就是說，瀏覽器最終會執(zhí)行“#sidebar p”的樣式，而并非“.intro”的樣式。那么，怎樣才能達到設計者的要求呢？很簡單，對樣式表修改如下：

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

CSS語言提供了相當多的選擇器供設計者使用。諸多地選擇器中，派生選擇器和高級選擇器的定位方法相當地靈活和準確，在不發(fā)生樣式沖突時，往往針對一個元素的定位可以有幾種方式，但它們效果相同。這讓我們產生了錯覺，會習慣于使用最簡單的定位方式（因為簡單明了，所以單詞相應的也少）。例如：

針對上面這段HTML語言中的無序列表里的標簽，以下都是有效的選擇器：

li a

body li a

html body li a

html body lu li a

盡管沒有使用類選擇器或ID選擇器等太復雜地定位方式，但是依然可以看出，都是對無序列表中的標簽做出定位，它們的權重值卻絕不相同。利用派生選擇器等的相對定位方式，可以靈活地改變權重值從而達到相應的效果。

參考文獻：

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

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

作者簡介：張一馳（1978.10-），男，漢族，內蒙古赤峰市人，助教，內蒙古交通職業(yè)技術學院，主要從事計算機網絡建設方面的研究。