css 3增加了大量的結構偽類，利用文件結構樹來實現表現，從而可以減少頁面內class屬性和id屬性的定義，使得文件更加簡潔。
相關閱讀文章：css3屬性選擇符介紹
4.7.3 結構偽類（structural pseudo-classes）
css 3增加了大量的結構偽類，利用文件結構樹來實現表現，從而可以減少頁面內class屬性和id屬性的定義，使得文件更加簡潔。
以下示例，請使用win xp的google chrome或者mac os x的safari 3.1檢視。
1. e:root
匹配文件的根元素。在(x)html中，根元素就是元素。例如：
:root
在(x)html文件中，其效果等同於：
html
2. e:nth-child(n)
匹配所有在其父元素中排第n個的e元素。n可以是數字/關鍵字/公式，例如：
tr:nth-child(3) /* 匹配所有**裡面排第3的行 */
tr:nth-child(2n 1) /* 2n 1，公式，匹配所有奇數行 */
tr:nth-child(odd) /* odd：關鍵字，匹配所有奇數行 */
tr:nth-child(2n) /* 2n：匹配所有偶數行*/
tr:nth-chi /* even：關鍵字，匹配所有偶數行li */
注意：元素的第乙個子元素索引為「1」。
利用這個偽類，可以很容易地實現雙背景色甚至多背景色**等效果。
例如有xhtml如下：
css如下：
#sample1 li:nth-child(even)
#sample1 li:nth-child(odd)
其顯示如圖4-41所示。
圖4-41 e:nth-child(n)的應用1
也可以實現三色甚至多色的背景。例如下列**：
#sample2 li:nth-child(3n 1)
#sample2 li:nth-child(3n 2)
#sample2 li:nth-child(3n)
……其顯示如圖4-42所示。
圖4-42 e:nth-child(n)的應用2
此時需注意的是，3n 1表示的是3行迴圈內的第1行，而3n則是第3行。
同時，也可以指定某乙個特定的子元素，例如下列**：
#sample3 li:nth-child(1)
#sample3 li:nth-child(2)
#sample3 li:nth-child(3)
前3名不同顯示的排行榜
……分別指定了第1、2、3個li的前景顏色color，其顯示如圖4-43所示。
圖4-43 e:nth-child(n)的應用3
也可以為同一列的單元格td指定相同的背景色：
#sample4 td:nth-child(3n 1)
#sample4 td:nth-child(3n 2)
#sample4 td:nth-child(3n 3)
1-11-2
1-3……
其顯示如圖4-44所示。
圖4-44 e:nth-child(n)的應用4
但是，需要特別注意的是，父元素內所有的子元素都參與排序，而無論元素的型別是什麼，在上面的例子中，子元素的型別都是單一的（li或者td），而下面這個例子中，子元素的型別不再單一（包括dt和dd）：
dt 1，總排行1
dd 1，總排行2
dt 2，總排行3
dd 2，總排行4
dd 3，總排行5
dt 3，總排行6
dt 4，總排行7
dd 4，總排行8
如果設定如下的css，那麼其顯示的效果則如圖4-45所示。
#sample5 dt
#sample5 dt:nth-child(odd)
圖4-45 e:nth-child(n)包括父元素內所有型別的子元素
由圖4-45讀者可以發現，判斷dt是否為奇數的條件是其在子元素內總排序，而不是dt元素單獨排序。
例項演示如下：
[ctrl a 全部選擇 提示：你可先修改部分**，再按執行]
本文標題: css3教程:新增加的結構偽類
本文位址:
點讚打賞
分享如果認為本文對您有所幫助請贊助本站
宣告：凡註明"本站原創"的所有文字等資料，版權均屬程式設計客棧所有，歡迎**，但務請註明出處。
標籤：結構 增加 教程 /li> 項哦列 " target="_blank">li> 元素
css例項：用css製作網頁畫素畫簡單學習css組合與css巢狀的寫法
您可能感興趣的文章:
廣告贊助
廣告贊助
最新發布
全站最新
廣而告之
© 2018-2021 程式設計客棧 贛icp備17006162號-9
贛公網安備 36110202000251號
top
CSS3 新增偽類
p first of type 父元素中第乙個p子元素 p lastt of type 父元素中最後乙個p子元素 p only of type 父元素中唯一乙個p子元素 p nth of type n 父元素中第n個p型別的p元素 p nth last of type n 父元素中倒數第n個p型別的...
CSS3 新增偽類
p first of type 選擇屬於其父元素的首個 元素的每個 元素。p last of type 選擇屬於其父元素的最後 元素的每個 元素。p only of type 選擇屬於其父元素唯一的 元素的每個 元素。p only child 選擇屬於其父元素的唯一子元素的每個 元素。p nth c...
CSS3新增偽類
p last of type 選擇其父元素的最後的乙個p元素 p last child 選擇其父元素的最後子元素 一定是p才行 p first of type 選擇其父元素的首個p元素 p first child 選擇其父元素的首個p元素 一定是p才行 p only child 選擇其父元素的只有乙...