:FIRST-CHILD, :LAST-CHILD, :NTH-CHILD, :NTH-LAST-CHILD

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

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

:FIRST-CHILD

指定的元素為父元素的第一子元素時，會應用此設計的風格。

<style type='text/css'> .fst I:first-child {background:green; color:red; font-size:140% } </style> <div class=fst> <i>第一子元素</i> <i>第二子元素</i> <i>第三子元素</i> </div>

• IE6 無此項；IE8, Firefox3.0, Safari, Chrome 都成功。

:LAST-CHILD

指定的元素為父元素的最後一個子元素時，會應用此設計的風格。 <style type='text/css'> .lst I:last-child {background:green; color:red; font-size:140% } </style> <div class=lst> <i>第一子元素</i> <i>第二子元素</i> <i>第三子元素</i> </div>

• IE6 無此項；Firefox3.0, Safari, Chrome 都成功。

:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。 <style type='text/css'> .hvr * {border:solid 1px red} .hvr:hover :first-child {background:red} .hvr:active :last-child {background:blue} </style> <div class=hvr> <i>第一子元素</i> <i>第二子元素</i> <q>第三子元素</q> </div>

child（你正在看 第一頁）

:

第一頁

第二頁