在行业内这么多年，有关样式看似简单，有些却不是那么好理解，样式上同样一个问题可能有多种解法，却很少去追究过它们的区别。今天我们来分析一下CSS3的两种伪类选择器，nth-child和nth-of-type。这篇文章过后，有关这两个伪类选择器的用法和区别，大家就只要记住两句话，就足够和学弟、学妹、学生、等吹上一年半载了，哈哈！
这里用到的实例dom结构是这样的：
一、p：nth-child(n)：
第一句：表示父元素下，第n个子元素，而且这个子元素是P标签。
给实例加上一段样式：
运行的结果是这样的：
结果中可以看到，中6个P元素的第一个P元素对这段样式起作用了，因为这个P元素是父元素中的第三个子元素，所以起作用了，如果我设置样式为p:nth-child(2)，或者p:nth-child(1)都不会起作用，因为父元素中第一和第二个元素都不是P元素。
因此，这也就解释了第一句话，首先要保证是第n个子元素，然后要保证是你定义的那个标签元素（这里是P标签）。
二、p：nth-of-type(n)：
第二句：表示父元素下，第n个P标签。
为了解释这句话，我们同样给上面实例添加段样式：
看一下运行的结果：
从结果可以看出，父元素的第二个P子元素起作用了，这个子元素是父元素的第四个子元素，但是是第二个P子元素，这也就解释了第二句话，父元素下的第n个指定标签的元素（这里是P标签）。
这里还有一些其它的类似的伪元素，也来总结一下它们的用法：
p:first-of-type（父元素下第一个P子元素）
p:last-of-type（父元素下最后一个P子元素）
p:nth-last-of-type(n)（父元素下倒数第n个P子元素）
这三个都比较好理解，下面用添加一段样式的方式来验证一下：
添加样式代码：
运行结果是这样的：
最后想说的一个伪类是p:only-of-type（指父元素的特定类型的唯一子元素），有一个关键字“唯一”。
下面用一上简单实例来验证一下具体什么意思：
上面是dom结构。三个元素，每个元素里有两个子元素，其中第三个里面是两个P子元素。下面给它们加上样式代码：
运行结果是这样的：
从结果看出，这个p元素要是父元素的唯一子元素。当有两个P子元素时，就不会起作用。
三、写在最后的总结：
知道了这两个伪类的本质使用区别（也就记住上面提到的那两句话），今后你也就可以轻松选取你想要的标签并给其添加和想改样式了。最关键的是，当面试问这些相关的问题时，在也不要紧张或者解释不清楚了，哈哈。
