萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> 低權重原則——避免濫用子選擇器

低權重原則——避免濫用子選擇器

CSS的選擇符是有權重的,當不同選擇符的樣式設置有沖突時,會采用權重高的選擇符設置的樣式。

如果CSS選擇符權重相同,那麼樣式會遵循就近原則,哪個選擇符最後定義,就采用哪個選擇符的樣式。

如果忽略了CSS選擇符權重,會產生意想不到的小麻煩。

需求與方案
 

復制代碼 代碼如下:
<style type=”text/css”>
#test { font-size: 14px; }
</style>
<p id=”test”>CSS 選擇符權重很重要</p>


現在需要將“很重要”三個字設置為紅色,我們的做法如下:

方案一,利用子選擇器

復制代碼 代碼如下:
<style type=”text/css”>
#test { font-size: 14px; }
#test span { color: red; }
</style>
<p id=”test”>CSS 選擇符權重<span>很重要</span></p>


方案二,新建class

復制代碼 代碼如下:
<style type=”text/css”>
#test { font-size: 14px; }
.red { color: red; }
</style>
<p id=”test”>CSS 選擇符權重<span class=”red”>很重要<span></p>


很多工程師推薦使用方案一,因為使用子選擇器可以避免新增class,讓HTML代碼更簡潔。這麼考慮是有道理的,但如果這時需求有變化,需要添加新的文字進來。

改變需求

復制代碼 代碼如下:
<style type=”text/css”>
#test { font-size: 14px; }
#test span { color: red; }
</style>
<p id=”test”>CSS 選擇符權重<span>很重要</span>, 我們要小心處理</p>


要求將‘小心處理’設置為綠色,我們可能會這樣做。

復制代碼 代碼如下:
<style type=”text/css”>
#test { font-size: 14px; }
#test span { color: red; }
.green { color: green; }
</style>
<p id=”test”>
CSS 選擇符權重<span>很重要</span>, 我們要<span class=”green”>小心處理<span></p>


本以為‘小心處理’會設置為綠色,但被權重更高的#test span設置為紅色。子選擇器在無意中影響到了我們新添加的代碼。如果想要達到我們的預期,重寫代碼如下

復制代碼 代碼如下:
<style type=”text/css”>
#test { font-size: 14px; }
#test span { color: red; }
#test .green { color: green; }
</style>
<p id=”test”>
CSS 選擇符權重<span>很重要</span>, 我們要<span class=”green”>小心處理<span></p>


而如果使用方案二,情況會怎麼樣呢

復制代碼 代碼如下:
<style type=”text/css”>
#test { font-size: 14px; }
.red { color: red; }
.green { color: green; }
</style>
<p id=”test”>CSS 選擇符權重<span class=”red”>很重要<span>,我們要<span class=”green”>小心處理<span></p>


因為沒有子選擇器,所以我們給新添加的代碼掛上新的class,就可以順利地完成樣式設置了。

小結
使 用子選擇器,會增加CSS選擇符的權重,CSS選擇符權重越高,樣式越不容易被覆蓋,越容易對其他選擇符產生影響。所以,除非確定HTML結構非常穩定, 不會再修改了,否則盡量不要使用子選擇器。為了保證樣式容易被覆蓋,提高可維護性,CSS選擇符需要保證權重盡可能低。

低權重原則——避免濫用子選擇器

copyright © 萬盛學電腦網 all rights reserved