:only-child

版本：CSS3

:nth-child(an+b)这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）

• 0n+3 或简单的 3 匹配第三个元素。
• 1n+0 或简单的 n 匹配每个元素。（兼容性提醒：在 Android 浏览器 4.3 以下的版本 n 和 1n 的匹配方式不一致。1n 和 1n+0 是一致的，可根据喜好任选其一来使用。）
• 2n+0 或简单的 2n 匹配位置为 2、4、6、8...的元素（n=0时，2n+0=0，第0个元素不存在，因为是从1开始排序)。你可以使用关键字 even 来替换此表达式。
• 2n+1 匹配位置为 1、3、5、7...的元素。你可以使用关键字 odd 来替换此表达式。
• 3n+4 匹配位置为 4、7、10、13...的元素。

a 和 b 都必须为整数，并且元素的第一个子元素的下标为 1。换言之就是，该伪类匹配所有下标在集合{an + b; n = 0, 1, 2,...}中的子元素。另外需要特别注意的是，an 必须写在 b 的前面，不能写成 b+an 的形式。

语法:

E:nth-child(n){sRules}

匹配父元素中的第n个子元素。参数是元素的索引。索引从1开始。n可以是一个数字，一个关键字，或者一个公式。

:nth-child(an+b)这个CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）。示例：

• 0n+3或简单的3匹配第三个元素。
• 1n+0或简单的n匹配每个元素。（兼容性提醒：在 Android 浏览器 4.3 以下的版本n和1n的匹配方式不一致。1n和1n+0是一致的，可根据喜好任选其一来使用。）
• 2n+0或简单的2n匹配位置为 2、4、6、8...的元素（n=0时，2n+0=0，第0个元素不存在，因为是从1开始排序)。你可以使用关键字even来替换此表达式。
• 2n+1匹配位置为 1、3、5、7...的元素。你可以使用关键字odd来替换此表达式。
• 3n+4匹配位置为 4、7、10、13...的元素。

a和b都必须为整数，并且元素的第一个子元素的下标为 1。换言之就是，该伪类匹配所有下标在集合{an + b; n = 0, 1, 2,...}中的子元素。另外需要特别注意的是，an必须写在b的前面，不能写成b+an的形式。

选择器示例

以

表格中的举例：

• tr:nth-child(2n+1)：表示HTML表格中的奇数行。
• tr:nth-child(odd)：表示HTML表格中的奇数行。
• tr:nth-child(2n)：表示HTML表格中的偶数行。
• tr:nth-child(even)：表示HTML表格中的偶数行。

以举例：

• span:nth-child(0n+1)：表示子元素中第一个且为span的元素，与:first-child选择器作用相同。
• span:nth-child(1)：表示父元素中子元素为第一的并且名字为span的标签被选中。
• span:nth-child(-n+3)：匹配前三个子元素中的span元素。

浏览器支持

IE9+以及新版浏览器都支持:nth-child()

例子

• E:nth-child(n)匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效，但n会继续递增。
• 要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是，即E可以是的子元素
• 该选择符允许使用一个乘法因子(n)来作为换算方式，比如我们想选中所有的偶数子元素E，那么选择符可以写成:E:nth-child(2n)

使用E:nth-child(n)实现奇偶:

因为(n)代表一个乘法因子，可以是0，1，2，3，...，所以(2n)换算出来会是偶数，而(2n+1)换算出来会是奇数

li:nth-child(2n){color:#f00;} /*偶数*/li:nth-child(2n+1){color:blue;} /*奇数*/

• 列表项一
• 列表项二
• 列表项三
• 列表项四

• 列表项一
• 列表项二
• 列表项三
• 列表项四

.demo1 li:nth-child(2n){color:#f00;}.demo1 li:nth-child(2n+1){color:blue;}