CSS 樣式jQueryCSS 選擇器, 依元素順序選擇範圍

CSS Selectors 選擇器

CSS 結構擬類型 Structural Pseudo-Classes 選擇器可以在網頁中的樹狀結構順序選擇範圍。使用 jQuery selectors 選擇器的組合在瀏覽器的版本支援度又來的大一些。

Selectors in jQuery

TH-ATH-BTH-CTH-DTH-E
TD-A01TD-B01TD-C01TD-D01TD-E01
TD-A02TD-B02TD-C02TD-D02TD-E02
TD-A03TD-B03TD-C03TD-D03TD-E03
TD-A04TD-B04TD-C04TD-D04TD-E04
TD-A05TD-B05TD-C05TD-D05TD-E05
TD-A06TD-B06TD-C06TD-D06TD-E06
TD-A07TD-B07TD-C07TD-D07TD-E07
TD-A08TD-B08TD-C08TD-D08TD-E08
TD-A09TD-B09TD-C09TD-D09TD-E09
TD-A10TD-B10TD-C10TD-D10TD-E10
$("table td:first-child").css("background-color","#eee588");
$("table td:last-child").css("background-color","#eee588");
$("table td:nth-child(2n)").css("background-color","#eee588");
$("table td:nth-child(3n)").css("background-color","#eee588");
$("table tr:nth-child(3n)").css("background-color","#eee588");
$("table tr:nth-child(3)").css("background-color","#eee588");
$("table tr:nth-child(3n+2)").css("background-color","#eee588");
$("table td:even").css("background-color","#eee588");
$("table td:odd").css("background-color","#eee588");

Structural Pseudo-Classes 結構擬類型

計算其父元素的所有子元素中之符合元素位置,符合索引編號由 1 開始,而其它未符合元素節點則不被計算。結構擬類型中有四個功能強大與特別的擬類型,可運用於版面設計之元素的位置,然後一次選擇多個元素來套用所設計的樣式。

W3C Selectors Overview



:first-child

選擇的元素為父元素的「第一個子元素」而套用所設計的樣式。

div.selectors span:first-child{background:#eee588;}
12345678910

:last-child

選擇的元素為父元素的「最後一個子元素」而套用所設計的樣式。

div.selectors span:last-child{background:#eee588;}
12345678910

:nth-child

選擇的元素為父元素的「由前方計算的固定間隔子元素」而套用所設計的樣式。
由「前方計算起」第 3 個子元素,及每隔 2 個子元素為被選取的子元素。

div.selectors span:nth-child(2n+3){background:#eee588;}
12345678910

:nth-last-child

選擇的元素為父元素的「由後方計算的固定間隔子元素」而套用所設計的樣式。
由「後方計算起」第 3 個子元素,及每隔 2 個子元素為被選取的子元素。

div.selectors span:nth-last-child(2n+3){background:#eee588;}
12345678910