:not()

not()

用來否定選擇條件，其語法是：

:not( 選擇條件 )

選擇條件必須是 規則集合。 <style type='text/css'> .cls:not(:first-child) {color:red} </style> <div> <i class=cls>第一子元素</i> <i class=cls>第二子元素</i> <i class=cls>第三子元素</i> </div>

• IE6 失敗；Firefox, Safari, Chrome 都成功。

:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。 <style type='text/css'> .hvr {border:solid 1px red} .hvr:hover TD:not(:empty) {background:red} .hvr:active TD:empty:before {content:'空格'; background:blue} </style> <table class=hvr> <tr><td>好玩遊戲<td> <tr><td><td>射擊遊戲 </table>

CSS hack：not 用於 CSS hack 有兩個原因：（一）IE 沒有支援 not()。（二）Firefox 沒有支援 not() 中放連續的選擇條件，只能放單一的選擇器。下面的範例依循兩個原則：（一）後宣告的值會蓋過先宣告的值。（二）解讀失敗的宣告會被忽略。 <style type='text/css'> DIV.cls1 {color:blue} DIV.cls1:not(:root ) {color:green} DIV.cls1:not(:root:link ) {color:red} </style> <div class=cls1> CSS hack：此段文字在 IE6 是藍色；在 Firefox 是綠色；Safari, Chrome 是紅色。 </div>