CSS3教程:新增加的結構偽類
互聯(lián)網(wǎng) 發(fā)布時間：2009-04-02 19:37:19 作者：佚名 
我要評論
我要評論網(wǎng)頁制作Webjx文章簡介：CSS 3增加了大量的結構偽類，利用文檔結構樹來實現(xiàn)表現(xiàn)，從而可以減少頁面內class屬性和ID屬性的定義，使得文檔更加簡潔。
相關閱讀文章：CSS3屬性選擇符介紹
4.7.3 結構偽類（Structural pseudo-cl
CSS 3增加了大量的結構偽類，利用文檔結構樹來實現(xiàn)表現(xiàn)，從而可以減少頁面內class屬性和ID屬性的定義，使得文檔更加簡潔。
相關閱讀文章：CSS3屬性選擇符介紹
4.7.3 結構偽類（Structural pseudo-classes）
CSS 3增加了大量的結構偽類，利用文檔結構樹來實現(xiàn)表現(xiàn)，從而可以減少頁面內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ù)字/關鍵字/公式，例如：
tr:nth-child(3) { …… } /* 匹配所有表格里面排第3的行<tr> */ tr:nth-child(2n 1) { …… } /* 2n 1，公式，匹配所有奇數(shù)行 */ tr:nth-child(odd) { …… } /* odd：關鍵字，匹配所有奇數(shù)行 */ tr:nth-child(2n) { …… } /* 2n：匹配所有偶數(shù)行*/ tr:nth-child(even) { …… } /* even：關鍵字，匹配所有偶數(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; /* 也可以設定float、margin、border等屬性 */ } #sample1 li:nth-child(odd) { background:#FC3; }
其顯示如圖4-41所示。
圖4-41 E:nth-child(n)的應用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)的應用2
此時需注意的是，3n 1表示的是3行循環(huán)內的第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>
分別指定了第1、2、3個li的前景顏色color，其顯示如圖4-43所示。
圖4-43 E:nth-child(n)的應用3
也可以為同一列的單元格td指定相同的背景色：
#sample4 td:nth-child(3n 1) { background:#FCC; } #sample4 td:nth-child(3n 2) { background:#F99; } #sample4 td:nth-child(3n 3) { background:#C6F; } <table border="0" cellspacing="0" cellpadding="0" id="sample4"> <tr> <td>1-1</td> <td>1-2</td> <td>1-3</td> </tr> …… </table>
其顯示如圖4-44所示。
圖4-44 E:nth-child(n)的應用4
但是，需要特別注意的是，父元素內所有的子元素都參與排序，而無論元素的類型是什么，在上面的例子中，子元素的類型都是單一的（li或者td），而下面這個例子中，子元素的類型不再單一（包括dt和dd）：
<dl id="sample5"> <dt>dt 1，總排行1</dt> <dd>dd 1，總排行2</dd> <dt>dt 2，總排行3</dt> <dd>dd 2，總排行4</dd> <dd>dd 3，總排行5</dd> <dt>dt 3，總排行6</dt> <dt>dt 4，總排行7</dt> <dd>dd 4，總排行8</dd> </dl>
如果設定如下的CSS，那么其顯示的效果則如圖4-45所示。
#sample5 dt { font-weight:bolder; } #sample5 dt:nth-child(odd){ background:#6CF; }
圖4-45 E:nth-child(n)包括父元素內所有類型的子元素
由圖4-45讀者可以發(fā)現(xiàn)，判斷dt是否為奇數(shù)的條件是其在子元素內總排序，而不是dt元素單獨排序。
實例演示如下：
[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運行]
相關文章
- 大家都知道每個瀏覽器對HTML元素渲染都不一樣，比如說button，在chrome和ff中，渲染出來的效果都是不盡相同的。這樣一來就有了今天這個思路，利用瀏覽器的對元素的默認渲染2015-12-12
基于jquery+css3實現(xiàn)的元素顫抖特效源碼
jquery+css3實現(xiàn)元素顫抖特效是一款基于css3實現(xiàn)的抖動效果，各種鬼畜般的抖動2015-01-14CSS3 重置iphone瀏覽器按鈕input,select等表單元素的默認樣式
之前寫了一個登錄表單頁面，再iphone上測試遇到了一些奇怪的問題：表單中的input[type="submit"]按鈕在iPhone的safari瀏覽器下會出現(xiàn)圓角的情況；input[type="text"]文本輸2014-10-11- 無論是偽類還是偽元素，都屬于CSS選擇器的范疇。所以它們的定義可以在CSS標準的選擇器章節(jié)找到。分別是 CSS2.1 Selectors 和 CSS Selector Level 3，兩者都已經(jīng)是推薦標準2014-09-04
css3設置box-pack和box-align讓div里面的元素垂直居中
只要設置元素的box-pack和box-align即可，這兩個屬性當前只有webkit和moz支持，要設置垂直居中的話只需要將這兩個屬性的值都設置為center即可，需要的朋友可以參考下2014-09-01- 讓我們通過完成一下的實例來了解一下如何在不使用無用的class和id屬性的情況下利用CSS3定位頁面元素。2009-08-29
- 網(wǎng)頁制作Webjx文章簡介：網(wǎng)頁教學網(wǎng)將在這篇文章向大家展示CSS中的5個有趣的新技術:圓角、個別圓角、不透明度、陰影和調整元素大小. CSS是眾所周知且應用2009-04-02
- 在css3中，我們使用animation與keyframes結合，可以給元素添加各種各樣的動畫效果。這篇文章主要介紹了css3實現(xiàn)多個元素依次顯示效果,需要的朋友可以參考下2017-12-12
