使用CSS設定網頁版型樣式，應該是許多網頁設計師共同語言，透過CSS所提供的選擇器，來設定網頁版型中的樣式，但是否常會遇到，明明已設定了新樣式，卻偏偏怎麼也無法套用，其實這跟優先權有關，雖然在CSS提供了許多不同的選擇器類型，當使用不用的選擇器時，它的優先套用順序也不同，因此梅干今天就來分享一下，CSS中選擇器的優先套用順序，讓你更容易掌控CSS的樣式設定，而不再每次傻傻抓不著頭緒。
首先，先來了解一下CSS選擇器的優先順序，與計算的規則。
優先順序：
style(!important)>ID>Class>元素(Elements)
計算規則：
從下方的計算規則中，愈左邊的權重愈高，同時若累積數量愈高，相對的層級也愈高，把它想成樸克牌的話，分別就是黑桃((style)!important)、愛心(ID)、方塊(Class)、梅花(元素)。
1.style(!important)-黑桃：1,0,0,0
2.ID－愛心：0,1,0,0
3.Class－方塊：0,0,1,0
4.元素－梅花：0,0,0,1
2.ID－愛心：0,1,0,0
3.Class－方塊：0,0,1,0
4.元素－梅花：0,0,0,1
從下方的範例可看到，這時候的「文字」為黃色，可看到手中拿了一張黑桃跟一張梅花，所以勝出。
#css
[css]
p#post{ /0,1(愛心),0,1(梅花)/
color: yellow;
}
p.post{ /0,0,1(方塊),1(梅花)/
color: blue;
}
p{ /0,0,0,1(梅花)/
color:red;
}
[/css]
#html
[html]
<div class="container">
<div class="row">
<p class="post" id="post">文字</p>
</div>
</div>
[/html]
再來看另一個範例，當大家手中牌都一樣時，就看誰最後出，誰就是贏家，因此這時的「文字」為紅色。
#css
[css]
.c1 span { color: green;} /0,0,1(方塊),1(梅花)/
.c2 span { color: purple;} /0,0,1(方塊),1(梅花)/
span .c3 { color: red;} /0,0,1(方塊),1(梅花)/
[/css]
#html
[html]
<span id="c1" class="c1 c2">
<span id="c2" class="c3">文字</span>
</span>
[/html]
延序上個範例，稍為改一下，將原來第一個的c1前方加一個元素，這時就會看到，第一個變成有二張梅花勝出，所以「文字」就會變成綠色。
#css
[css]
span.c1 span { color: green;} /* 0,0,1(方塊),2(梅花)/
.c2 span { color: purple;} / 0,0,1(方塊),1(梅花)/
span .c3 { color: red;} / 0,0,1(方塊),1(梅花)*/
[/css]
#html
[html]
<span id="c1" class="c1 c2">
<span id="c2" class="c3">文字</span>
</span>
[/html]
透過樸克牌的四個花色，希望各位更容易理解，因此當下回遇到怎麼設定都被畫掉時，就可看一下是否所設定的CSS優先權級太低，另外這邊梅干也稍稍提醒一下，雖然!important是直接霸凌，完全不用比，當出現二個!important時，優先權就是依讀取的先後順序，與其它的選擇器的原理相同，因此非到必要性，也盡量少用!important，除非真是所有層級都相當時，只好使用!important來進行設定，希望這篇對大家都有幫助，如有那邊解釋不清楚的，也歡迎討論。