: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 的形式。

语法:

匹配父元素中的第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的形式。

选择器示例

以

例子

• 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;} /*奇数*/ 

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

使用odd，even实现奇偶:

关键字odd代表奇数，even代表偶数

li:nth-child(even){color:#f00;}  /*偶数*/
li:nth-child(odd){color:blue;}   /*奇数*/ 

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

注意

E:nth-child(n)会选择父元素的第n个子元素E，如果第n个子元素不是E，则是无效选择符，但n会递增。

第1个p
第2个p
第1个span
第3个p第2个span
第4个p
第5个p
p:nth-child(3){color:#f00;}

第三个

第1个p
第2个p
第1个span
第3个p第2个span
第4个p
第5个p
p:nth-child(4){color:#f00;}

p:first-of-type{color:#f00;}

//或者这样写:

p:nth-of-type(1){color:#f00;}

span:nth-child(2n+1), without an <em> among the child elements.
children 1, 3, 5, and 7 are selected.
 span 1! span 2 span 3! span 4 span 5! span 6 span 7!

span:nth-child(2n+1), with an <em> among the child elements.
children 1, 5, and 7 are selected.
 3 is used in the counting because it is a child, but it isn't
   selected because it isn't a <span>.
 span! span this is an `em`. span span! span span! span

span:nth-of-type(2n+1), with an <em> among the child elements.
children 1, 4, 6, and 8 are selected.
 3 isn't used in the counting or selected because it is an <em>, 
   not a <span>, and nth-of-type only selects
   children of that type. the <em> is completely skipped
   over and ignored.
 span! span this is an `em`. span! span span! span span!
//CSS


html {
  font-family: sans-serif;
}

span,
div em {
  padding: 5px;
  border: 1px solid green;
  display: inline-block;
  margin-bottom: 3px;
}

.first span:nth-child(2n+1),
.second span:nth-child(2n+1),
.third span:nth-of-type(2n+1) {
  background-color: lime;
}

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com