2017
07
14

CSS3選擇器 :not() 讓CSS也支援判斷的機制[轉載自 梅問題.教學網]

關鍵字:CSSCSS3網頁設計

其實現在不用這麼麻煩,只需透過CSS3的:not選擇器,就可實現像javascript中的ifb而判斷式,可以針對某個DIV不套用此效果,如此一來就設定上就更加的容易,甚至透過:not選擇器,也可用來當成搜尋器的關鍵字排除器,相當的方便,但這個:not選擇器要怎麼用呢?現在就一塊來看看吧~

首先,先建立好div的區塊,而梅干先簡單的建立5個DIV,並在二個DIV中加入active與active1的類別名稱。

1

2

3

4

5

6

7

8

9

<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,不套用此樣式。

1

2

3

.col:not(.active){

  background:#E14521;

}

當有二個div不套用時,用法也很簡單,不是用,而是後方接著寫,這樣就可實現排除套用啦!這對於排版就真的是超方便的。

1

2

3

.col:not(.active):not(.active1){

  background:#E14521;

}

 

傑立資訊傑立資訊事業有限公司

電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:[email protected] | 臺北市信義區和平東路3段257號6樓map

© 2019 傑立資訊 All rights reserved.