CSS3 中关于 *-of-type 和 *-child的差异性及适用场景

CSS3 中有很多表示元素序号的选择器，有以下几种:first-child、:first-of-type、:last-of-type、:only-of-type、:only-child、:nth-child(n)、:nth-last-child(n)、:nth-of-type(n)、:nth-last-of-type(n)、:last-child

初学者可能会比较容易混淆，这里可以分一下类

*-of-type	*-child
:first-of-type	:first-child
:last-of-type	:last-child
:nth-of-type(n)	:nth-child(n)
:nth-last-of-type(n)	:nth-last-child(n)
:only-of-type	:only-child

可以看出完全是一一对应，相信CSS开发者都对这些选择器的功能有个大致印象，比如first-*表示第一个，nth-*表示第几个，nth-last-*表示倒数第几个…

*-of-type 和 *-child

那么，-of-type和****-child 到底有什么区别呢？

从字面上来看，其实就是type和child的区别，也就是说

type表示类型，一类元素，比如都是p元素或者div元素</