CSS, CSS2, 網頁設計

CSS教學-CSS選擇器套用樣式的優先權順序

梅干 2017/02/08
梅問題-CSS選擇器套用樣式的優先權順序
  使用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

從下方的範例可看到,這時候的「文字」為黃色,可看到手中拿了一張黑桃跟一張梅花,所以勝出。
#css
p#post{ /*0,1(愛心),0,1(梅花)*/
	color: yellow; 
}
p.post{ /*0,0,1(方塊),1(梅花)*/
		color: blue;
}
p{ /*0,0,0,1(梅花)*/
	color:red;
}
#html
<div class="container">
	<div class="row">
		<p class="post" id="post">文字</p>
	</div>
</div>

再來看另一個範例,當大家手中牌都一樣時,就看誰最後出,誰就是贏家,因此這時的「文字」為紅色。
#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(梅花)*/
#html
<span id="c1" class="c1 c2">
  <span id="c2" class="c3">文字</span>
</span>	

延序上個範例,稍為改一下,將原來第一個的c1前方加一個元素,這時就會看到,第一個變成有二張梅花勝出,所以「文字」就會變成綠色。
#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(梅花)*/
#html
<span id="c1" class="c1 c2">
  <span id="c2" class="c3">文字</span>
</span>	

  透過樸克牌的四個花色,希望各位更容易理解,因此當下回遇到怎麼設定都被畫掉時,就可看一下是否所設定的CSS優先權級太低,另外這邊梅干也稍稍提醒一下,雖然!important是直接霸凌,完全不用比,當出現二個!important時,優先權就是依讀取的先後順序,與其它的選擇器的原理相同,因此非到必要性,也盡量少用!important,除非真是所有層級都相當時,只好使用!important來進行設定,希望這篇對大家都有幫助,如有那邊解釋不清楚的,也歡迎討論。