CSS, CSS3, 網頁設計

CSS3選擇器 :not() 讓CSS也支援判斷的機制

梅干 2017/06/25
梅問題-CSS3選擇:not讓CSS也支援if判斷式
  自從CCS3新增了許多屬性了,從圓角、陰影、半透明....一直到動畫,讓網頁變得更加多元,同時再加上一些新的選擇器,大幅的減少在DIV區塊的類別命名,直接透過CSS3的選擇器,就可針對那個DIV要套用什麼樣式,雖然說CSS3的選擇器很方便,可針對n個區塊進行套用,但今天若希望除了第N的DIV不套用,其它的都套用時,這下就只能用javascript輔助來完成了。
  其實現在不用這麼麻煩,只需透過CSS3的:not選擇器,就可實現像javascript中的ifb而判斷式,可以針對某個DIV不套用此效果,如此一來就設定上就更加的容易,甚至透過:not選擇器,也可用來當成搜尋器的關鍵字排除器,相當的方便,但這個:not選擇器要怎麼用呢?現在就一塊來看看吧~
首先,先建立好div的區塊,而梅干先簡單的建立5個DIV,並在二個DIV中加入active與active1的類別名稱。
<div class="container">
	<div class="row">
		<div class="col">col-1</div>
		<div class="col active">col-2</div>
		<div class="col">col-3</div>
		<div class="col active1">col-4</div>
		<div class="col">col-5</div>
	</div>
</div>

接著當要排除套用時,只需加入:not(類別名稱),這樣就會自動的略過該div,不套用此樣式。
.col:not(.active){
	background:#E14521;
}

梅問題-CSS3選擇:not讓CSS也支援if判斷式
當有二個div不套用時,用法也很簡單,不是用,而是後方接著寫,這樣就可實現排除套用啦!這對於排版就真的是超方便的。
.col:not(.active):not(.active1){
	background:#E14521;
}

梅問題-CSS3選擇:not讓CSS也支援if判斷式
[範例預覽]