CSS Selectors 選擇器

CSS「偽類選擇器」擬類型 Structural Pseudo-Classes 選擇器可以在網頁中的 Tree 樹狀結構順序選擇範圍。使用 jQuery Selectors 選擇器的組合在瀏覽器的版本支援度又來的大一些,基本上選擇參數是相同的。


表格中的選擇運用 Selectors in jQuery

網頁中表格選擇器可以依照 <table> <tr> <td> 結構層次順序選擇範圍。

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","greenyellow");
$("table td:last-child").css("background-color","greenyellow");
$("table td:nth-child(2n)").css("background-color","greenyellow");
$("table td:nth-child(3n)").css("background-color","greenyellow");
$("table tr:nth-child(3n)").css("background-color","greenyellow");
$("table tr:nth-child(3)").css("background-color","greenyellow");
$("table tr:nth-child(3n+2)").css("background-color","greenyellow");
$("table td:even").css("background-color","greenyellow");
$("table td:odd").css("background-color","greenyellow");

使用 jQuery Selectors 選擇器

jQuery Selectors 選擇器是可以快速尋找出網頁上的元素,並對它們進行操作或修改。但是可能會遇到效能問題,但元素不多的情況影響不大,有些建議是使用 Html 元素 IDClass 來選擇元素,而不是使用屬性 Attributes 或元素 Name 名稱,因為可以提高選擇器的效率和準確性。使用 CSS3 的新特性來選擇元素如 :nth-child() 或 :not() 可以減少選擇器的長度和複雜度。使用 jQuery .find() 或 .filter() 方法來過濾或修改選擇器的結果可以增加選擇器的靈活性。


Structural Pseudo-Classes 結構擬類型

計算其父元素下的所有子元素中之符合元素位置,符合索引編號由 1 開始,而其它未符合元素節點則不被計算。其中有四個比較常用的類型,可運用於版面設計之元素的位置,然後一次選擇多個元素來套用所設計的樣式。其父元素下若有不同標籤類型的 Html 元素,亦可以參考 :nth-of-type(), :nth-last-of-type(), :first-of-type, :last-of-type 適用於匹配所指定「標籤類型」的方式。

W3C Selectors Overview



:first-child

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

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

:last-child

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

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

:nth-child

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

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

選取單一個子元素。

div.selectors span:nth-child(3){background:greenyellow;}
12345678910

可以使用 :nth-child(even) 選取「偶數」子元素;或 :nth-child(odd) 選取「單數」子元素。

div.selectors span:nth-child(even){background:greenyellow;}
12345678910
div.selectors span:nth-child(odd){background:greenyellow;}
12345678910

:nth-last-child

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

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

由後算起第 6 個子元素的全部、包括第 6 個。

div.selectors span:nth-last-child(1n+6){background:greenyellow;}
12345678910