css3 first of type,css3属性:first-of-type带class写法各大浏览器都不能识别，失效，遇到css bug啦？...

经常写页面的前端，相信对E:first-child 、E:nth-child这种伪类选择符 Pseudo-Classes Selectors 的写法并不陌生，但其实伪类选择符不仅仅只有你经常用的这几种写法，如下表：

伪类选择符 Pseudo-Classes Selectors

语法关键词：匹配父元素内的****

语法关键词：匹配父元素内同类型标签元素中的****

E:first-child

E:first-of-type

E:last-child

E:last-of-type

E:only-child

E:only-of-type

E:nth-child(n)

E:nth-of-type(n)

E:nth-last-child(n)

E:nth-last-of-type(n)

观察上面表格可发现，我们发现左侧伪类选择符跟右侧伪类选择符是一一对应的，单词拼写无非就是将-child部分替换成-of-type,这就意味着不用一个个去死记硬背所有的伪类选择符，只要拿其中一对伪类选择符 做下用法对比就可以掌握左右两侧所有伪类选择符的用法区别，下面我们以E:first-child vs E:first-of-type 为例说明两者之间的用法区别：

E:first-child：匹配父元素的第一个子元素E，标红显示，代码：

.box p:first-child

{

background:#ff0000;

}

这是第1个段落。

这是第2个DIV。

这是第2个DIV。

这是第2个段落。

提示：你可以先修改部分代码再运行。

E:first-of-type：匹配父元素内同类型标签元素中的第一个元素E，标红显示，代码：

.box p:first-of-type

{

background:#ff0000;

}

这是第2个DIV。

这是第1个段落。

这是第2个DIV。

这是第2个段落。

提示：你可以先修改部分代码再运行。

这里E:first-of-type要重点强调的是:匹配父元素内同类型标签元素中的第一个元素E，为什么要着重强调，我们直接看下面代码：

.box .test:first-of-type

{

background:#ff0000;

}

这是第2个DIV。

这是第1个段落。

这是第2个段落。

这是第2个DIV。

这是第3个段落。

提示：你可以先修改部分代码再运行。

这段代码，没有像我们期望中的标红.test元素(即第2个段落标签)，如果没理解到上面提到的语法关键词意思，第一反应可能会产生“:first-of-type带class写法浏览器不能识别，失效，这是bug”的错误理解。

我们不能简单粗暴，理所当然的将上面的代码错误理解为“匹配父元素.box内第一个.test元素”，我们按上面提到关键词解析下：.box .test:first-of-type

即：匹配父元素.box内同类型标签元素P中的第一个元素.test

但我们看到.test 明显是父元素.box内同类型标签元素P中的第二个元素,所以.test元素(即第2个段落标签)并没有被匹配标红！

要匹配选中.test,我们可以这样改写：

.box .test:nth-child(3)

或

.box .test:nth-of-type(2)

注：nth-***选择器前面的nth并不是某些单词的英文缩写,正确理解是：n表示不定序数词，可理解成第n个的意思；th表示后缀SUFFIX ，构成序数词表示方式 ，如5th ，可表示日历中的5号，仅此而已。