CSS3教程:新增加的結(jié)構(gòu)偽類

2024-07-11 08:24:17

字體：大中小

供稿：網(wǎng)友

CSS 3增加了大量的結(jié)構(gòu)偽類，利用文檔結(jié)構(gòu)樹來實現(xiàn)表現(xiàn)，從而可以減少頁面內(nèi)class屬性和ID屬性的定義，使得文檔更加簡潔。
相關(guān)閱讀文章：CSS3屬性選擇符介紹
4.7.3 結(jié)構(gòu)偽類（Structural pseudo-classes）
CSS 3增加了大量的結(jié)構(gòu)偽類，利用文檔結(jié)構(gòu)樹來實現(xiàn)表現(xiàn)，從而可以減少頁面內(nèi)class屬性和ID屬性的定義，使得文檔更加簡潔。
以下示例，請使用Win XP的Google Chrome或者MAC OS X的Safari 3.1查看。
1. E:root
匹配文檔的根元素。在(X)HTML中，根元素就是<html>元素。例如：
:root { border: 1px solid blue; }
在(X)HTML文檔中，其效果等同于：
html { border: 1px solid blue; }
2. E:nth-child(n)
匹配所有在其父元素中排第n個的E元素。n可以是數(shù)字/關(guān)鍵字/公式，例如：
tr:nth-child(3) { …… } /* 匹配所有表格里面排第3的行<tr> */tr:nth-child(2n 1) { …… } /* 2n 1，公式，匹配所有奇數(shù)行 */tr:nth-child(odd) { …… } /* odd：關(guān)鍵字，匹配所有奇數(shù)行 */tr:nth-child(2n) { …… } /* 2n：匹配所有偶數(shù)行*/tr:nth-child(even) { …… } /* even：關(guān)鍵字，匹配所有偶數(shù)行l(wèi)i */注意：元素的第一個子元素索引為“1”。
利用這個偽類，可以很容易地實現(xiàn)雙背景色甚至多背景色表格等效果。
例如有xhtml如下：
<ol id="sample1"> <li>列表項哦列表項</li> <li>列表項哦列表項</li> <li>列表項哦列表項</li> <li>列表項哦列表項</li></ol>
CSS如下：
#sample1 li:nth-child(even) { /* #sample1的子元素中排序為奇數(shù)的li */background:#FF9; /* 也可以設(shè)定float、margin、border等屬性 */}#sample1 li:nth-child(odd) {background:#FC3;}
其顯示如圖4-41所示。

圖4-41 E:nth-child(n)的應(yīng)用1
也可以實現(xiàn)三色甚至多色的背景。例如下列代碼：
#sample2 li:nth-child(3n 1) {background:#F90;}#sample2 li:nth-child(3n 2) {background:#Fc3;}#sample2 li:nth-child(3n) {background:#FF9;}<ol id="sample2"> <li>列表項哦列表項</li> <li>列表項哦列表項</li> ……</ol>
其顯示如圖4-42所示。

圖4-42 E:nth-child(n)的應(yīng)用2
此時需注意的是，3n 1表示的是3行循環(huán)內(nèi)的第1行，而3n則是第3行。
同時，也可以指定某一個特定的子元素，例如下列代碼：
#sample3 li:nth-child(1) {color:#F00;}#sample3 li:nth-child(2) {color:#F60;}#sample3 li:nth-child(3) {color:#FC0;}<h4>前3名不同顯示的排行榜</h4><ol id="sample3"> <li>列表項哦列表項</li> <li>列表項哦列表項</li> <li>列表項哦列表項</li> ……</ol>

上一篇：W3C標準以及XHTML和HTML

下一篇：將設(shè)計稿轉(zhuǎn)換成WEB頁面職業(yè)者