经常写页面的前端，相信对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，标红显示，代码：

<style>
.box p:first-child
{
background:#ff0000;
}
</style>
<div class="box">
<p>这是第1个段落。</p>
<div>这是第2个DIV。</div>
<div>这是第2个DIV。</div>
<p>这是第2个段落。</p>
</div>

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

<style>
.box p:first-of-type
{
background:#ff0000;
}
</style>
<div class="box">
<div>这是第2个DIV。</div>
<p>这是第1个段落。</p>
<div>这是第2个DIV。</div>
<p>这是第2个段落。</p>
</div>

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

<style>
.box .test:first-of-type
{
background:#ff0000;
}
</style>
<div class="box">
<div>这是第2个DIV。</div>
<p>这是第1个段落。</p>
<p class='test'>这是第2个段落。</p>
<div>这是第2个DIV。</div>
<p>这是第3个段落。</p>
</div>

这段代码，没有像我们期望中的标红.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号，仅此而已。