css設置的樣式是可以重疊的，如果兩個不同的的選擇符對同一個標籤的定義產生衝突，就會設計到css選擇符的權重問題了。
當不同的選擇符樣式設置有衝突時，會採用權重高的選擇符設置樣式。
權重的規則如下：HTML標籤的權重是1，class的權重是10，id的權重是100，例如p的權重是1，“div em”的權重是1+1=2，“strong.demo”的權重是1+10=11，“#text.red”的權重是100+10=110.
如果兩個的權重相同，那麼就會遵循就近原則，哪個選擇符最後定義，就採用哪個選擇符的樣式。
<style type=”text/css”>
span{font-size:40px}
.text{color:red;}
.text2{color:green;}
</style>
<span class=”text text2″>123123123</span>
上述代碼中的123123123會以綠色顯示，注意這裏強調的“就近原則”是基於選擇符定義的先後順序，而不是掛class的先後順序。掛class的順序沒有區別。
css選擇符的權重問題容易被忽視，會帶來想不到的小麻煩。例如：
<p id=”test”>css is <span>important<span></p>
方案一：利用子選擇器；
#test span{color:red;}
可以實現important紅色，而且不用修改html。
方案二：新建class；
<p id=”test”>css is <span class=”font”>important</span></p>
.font{color:red;}
方案二由於新增了class，很多人不推薦這麼做，這麼考慮是有道理的，但是如果需求有變化，需要加入新的文字。
<p id=”test”>css is <span>important</span>,<span class=”font2″>you must take care of it<span>.</p>
並且要求新增字體爲綠色。那麼按照方案一的思路我們很容易這樣去寫css：
#test span{color:red;}
.font2{color:green;}
這樣本應是綠色的文字會變成綠色嗎？不會，因爲#test span選擇符的權重爲100+1=101，高於.font2的權重10，所以後設定的綠色不能覆蓋前面的紅色。
我們要修改css：
#test span{color:red;}
#test .font2{color:green;}
這樣便能實現我們的設計。如果使用方案二呢？我們需要添加一個新的class：
.font{color:red;}
.font2{color:green;}
<p id=”test”>css is <span class=”font”>important</span>,<span class=”font2″>you must take care of it<span>.</p>
由於方案二沒有使用子選擇器，所以我們添加新的class就可以很好的完成設計。使用子選擇器，會增加css選擇符的權重，css權重越高，就越難以被覆蓋，所以除非html結構非常穩定，不會再修改，所以儘量不要使用子選擇器。
爲了保證樣式容易被覆蓋，提高可維護性，css選擇符需保證權重儘可能低。
避免使用子選擇器，而添加class與組合的思路差不多，有興趣的朋友可以查看高質量css一文。
