DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS3基礎 >> 3.5 :not()選擇器
3.5 :not()選擇器
編輯:CSS3基礎     

一、:not()選擇器

在CSS3中,:not()選擇器中主要用於選取某個元素之外的所有元素。這是very very實用的一個選擇器,大家要重點記憶一下。

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<title>CSS3 :not()選擇器</title>
    <style type="text/css">
        *{padding:0;margin:0;}
        ul{list-style-type:none;}
        ul li:not(.first)
        {
            color:red;
        }
    </style>
</head>
<body>
    <ul>
        <li class="first"> 學習網</li>
        <li> 學習網</li>
        <li> 學習網</li>
        <li> 學習網</li>
    </ul>
</body>
</html>

在浏覽器預覽效果如下:

分析:

對於 “ul li:not(.first)”這個選擇器,我們分2步來看,其中括號內的“.first”表示選擇class值為first的元素(即第1個li元素),因此“ul li:not(.first)”表示選擇ul元素下除了第1個li元素的其他所有li元素。

假如沒有:not()選擇器,我們要實現如上效果也是非常費事的一件事情,冗余代碼多。其實:not()選擇器的使用思想跟數學上補集的思想類似。:not()選擇器在實際開發中非常實用,也比較靈活。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved