2013/01/07

child 第二頁

:FIRST-CHILD | :LAST-CHILD | :NTH-CHILD | :NTH-LAST-CHILD

以上為 準類別(Pseudo-classes)的子元素準類別。主要用在控制子元素的展現風格。

:NTH-CHILD

指定的元素為父元素由前算起的固定間隔子元素時,會應用此設計的風格。其語法是:

元素:nth-child(a*n + b) { 風格區塊 }

上述的意思是:由前算起第 b 個子元素,及每隔 a 個子元素,都是被選取的子元素。a, b 須是整數。第一個子元素的指標是 1。如果 a 是負值,則由第 b 個子元素起向前算。此項很適合用在排列整齊的報表。

也可以使用 :nth-child(even) 選取偶數子元素;或 :nth-child(odd) 選取奇數子元素。:nth-child(0*n + 1) 與 :nth-child(1) 等同於 :first-child。

  • IE6, Firefox3.0 無此項;Safari, Chrome 都成功。
:NTH-LAST-CHILD

指定的元素為父元素由後算起的固定間隔子元素時,會應用此設計的風格。其語法是:

元素:nth-last-child(a*n + b) { 風格區塊 }

上述的意思是:由後算起第 b 個子元素起,及每隔 a 個子元素,都是被選取的子元素。a, b 須是整數。最後一個子元素的指標是 1。如果 a 是負值,則向後算。

也可以使用 :nth-last-child(even) 選取偶數子元素;或 :nth-last-child(odd) 選取奇數子元素。:nth-last-child(0*n + 1) 與 :nth-last-child(1) 等同於 :last-child。

  • IE6, Firefox3.0 無此項;Safari, Chrome 都成功。
child(你正在看 第二頁) : 第一頁 第二頁