2017年6月25日 星期日

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

  自從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判斷式
[範例預覽]



from 梅問題.教學網 https://www.minwt.com/webdesign-dev/css/17780.html

沒有留言:

張貼留言