CSS Selectors 选择器

CSS「伪类选择器」拟类型 Structural Pseudo-Classes 选择器可以在网页中的 Tree 树状结构顺序选择范围。使用 jQuery Selectors 选择器的组合在浏览器的版本支援度又来的大一些，基本上选择参数是相同的。

表格中的选择运用 Selectors in jQuery

网页中表格选择器可以依照 <table> <tr> <td> 结构层次顺序选择范围。

使用 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 适用于匹配所指定「标籤类型」的方式。

W3C Selectors Overview

: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;}