避免濫用子選擇器

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選擇符需要保證權重盡可能低。

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