DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS3教程:新增加的結構偽類
CSS3教程:新增加的結構偽類
編輯:CSS詳解     

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中,根元素就是<Html>元素。例如:

:root { border: 1px solid blue; }

在(X)Html文檔中,其效果等同於:

Html { border: 1px solid blue; }

2. E:nth-child(n)

匹配所有在其父元素中排第n個的E元素。n可以是數字/關鍵字/公式,例如:

tr:nth-child(3) { …… }     /* 匹配所有表格裡面排第3的行<tr> */
tr:nth-child(2n+1) { …… }  /* 2n+1,公式,匹配所有奇數行 */
tr:nth-child(odd) { …… }   /* odd:關鍵字,匹配所有奇數行 */
tr:nth-child(2n) { …… }    /* 2n:匹配所有偶數行*/
tr:nth-child(even) { …… }  /* even:關鍵字,匹配所有偶數行li */
注意:元素的第一個子元素索引為“1”。

利用這個偽類,可以很容易地實現雙背景色甚至多背景色表格等效果。
例如有xHtml如下:

<ol id="sample1">
  <li>列表項哦列表項</li>
  <li>列表項哦列表項</li>
  <li>列表項哦列表項</li>
  <li>列表項哦列表項</li>
</ol>

CSS如下:

#sample1 li:nth-child(even) {  /* #sample1的子元素中排序為奇數的li */
background:#FF9;  /* 也可以設定float、margin、border等屬性 */
}
#sample1 li:nth-child(odd) {
background:#FC3;
}

其顯示如圖4-41所示。

圖4-41 E:nth-child(n)的應用1

也可以實現三色甚至多色的背景。例如下列代碼:

#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行循環內的第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讀者可以發現,判斷dt是否為奇數的條件是其在子元素內總排序,而不是dt元素單獨排序。

實例演示如下:


 [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved