CSS Selectors 選擇器
CSS「偽類選擇器」擬類型 Structural Pseudo-Classes 選擇器可以在網頁中的 Tree 樹狀結構順序選擇範圍。使用 jQuery Selectors 選擇器的組合在瀏覽器的版本支援度又來的大一些,基本上選擇參數是相同的。
表格中的選擇運用 Selectors in jQuery
網頁中表格選擇器可以依照 <table> <tr> <td> 結構層次順序選擇範圍。
TH-A | TH-B | TH-C | TH-D | TH-E |
---|---|---|---|---|
TD-A01 | TD-B01 | TD-C01 | TD-D01 | TD-E01 |
TD-A02 | TD-B02 | TD-C02 | TD-D02 | TD-E02 |
TD-A03 | TD-B03 | TD-C03 | TD-D03 | TD-E03 |
TD-A04 | TD-B04 | TD-C04 | TD-D04 | TD-E04 |
TD-A05 | TD-B05 | TD-C05 | TD-D05 | TD-E05 |
TD-A06 | TD-B06 | TD-C06 | TD-D06 | TD-E06 |
TD-A07 | TD-B07 | TD-C07 | TD-D07 | TD-E07 |
TD-A08 | TD-B08 | TD-C08 | TD-D08 | TD-E08 |
TD-A09 | TD-B09 | TD-C09 | TD-D09 | TD-E09 |
TD-A10 | TD-B10 | TD-C10 | TD-D10 | TD-E10 |
使用 jQuery Selectors 選擇器
jQuery Selectors 選擇器是可以快速尋找出網頁上的元素,並對它們進行操作或修改。但是可能會遇到效能問題,但元素不多的情況影響不大,有些建議是使用 Html 元素 ID 或 Class 來選擇元素,而不是使用屬性 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 適用於匹配所指定「標籤類型」的方式。
:first-child
選擇的元素為父元素下的「第一個子元素」而套用所設計的樣式。
div.selectors span:first-child{background:greenyellow;}
:last-child
選擇的元素為父元素下的「最後一個子元素」而套用所設計的樣式。
div.selectors span:last-child{background:greenyellow;}
:nth-child
選擇的元素為父元素下的「由前方計算的固定間隔子元素」而套用所設計的樣式。
由「前方計算起」第 3 個子元素,及每隔 2 個子元素為被選取的子元素。
div.selectors span:nth-child(2n+3){background:greenyellow;}
選取單一個子元素。
div.selectors span:nth-child(3){background:greenyellow;}
可以使用 :nth-child(even) 選取「偶數」子元素;或 :nth-child(odd) 選取「單數」子元素。
div.selectors span:nth-child(even){background:greenyellow;}
div.selectors span:nth-child(odd){background:greenyellow;}
:nth-last-child
選擇的元素為父元素下的「由後方計算的固定間隔子元素」而套用所設計的樣式。
由「後方計算起」第 3 個子元素,及每隔 2 個子元素為被選取的子元素。
div.selectors span:nth-last-child(2n+3){background:greenyellow;}
由後算起第 6 個子元素的全部、包括第 6 個。
div.selectors span:nth-last-child(1n+6){background:greenyellow;}