DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS3基礎 >> 3.2 結構偽類選擇器(1)
3.2 結構偽類選擇器(1)
編輯:CSS3基礎     

一、結構偽類選擇器

對於CSS3的結構偽類選擇器,為了更好地讓剛剛學習CSS3教程的新手能夠理解,我把它們劃分為了3大類。這一節,我們先來給大家講解一下第1類結構偽類選擇器。

結構偽類選擇器(第1類) 選擇器 說明 E:first-child 選擇父元素的第一個子元素 E:last-child 選擇父元素的最後一個子元素 E:nth-child(n) 選擇父元素下的第n個元素或奇偶元素,n的值為“數字 | odd | even” E:only-child 選擇父元素中唯一的子元素(該父元素只有一個子元素)

這些結構偽類選擇器都很好理解,下面我們通過幾個實例讓大家感受一下這些選擇器的用法。

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
    <title>CSS3結構偽類選擇器</title>
    <style type="text/css">
        *{padding:0;margin:0;}
        ul
        {
            display:inline-block;
            width:200px;
            list-style-type:none;
        }
        ul li
        {
            height:20px;
        }
        ul li:first-child{background-color:red;}
        ul li:nth-child(2){background-color:orange;}
        ul li:nth-child(3){background-color:yellow;}
        ul li:nth-child(4){background-color:green;}
        ul li:last-child{background-color:blue;}
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

在浏覽器預覽效果如下:

分析:

想要實現同樣的效果,很多人想到在li元素加上id或class屬性來實現。但是這樣會使得HTML結構id和class泛濫,不便於維護。使用結構偽類選擇器,使得我們HTML結構非常清晰,結構與樣式分離,便於維護,也更利於SEO。

上面這種使用結構偽類選擇器的地方非常多,特別適合操作列表中列表項的不同樣式。例如 學習網首頁的“helicopter的博客”列表中,列表項的排序數字背景顏色的不同就是使用結構偽類選擇器來實現的。

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
    <title>CSS3結構偽類選擇器</title>
    <style type="text/css">
        *{padding:0;margin:0;}
        ul
        {
            display:inline-block;
            width:200px;
            border:1px solid gray;
            list-style-type:none;
        }
        ul li
        {
            height:20px;
            background-color:green;
        }
        /*設置偶數列顏色*/
        ul li:nth-child(even)
        {
            background-color:red;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

在浏覽器預覽效果如下:

分析:

隔行換色這種效果也很常見,例如表格隔行換色、列表隔行換色等,這些也是用戶體驗非常好的設計細節。其中 學習網就用到了:nth-child()這個結構偽類選擇器對列表進行隔行換色設置。

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