CSS不变：p:nth-child(2){color:red;font-weight:bold;}h5:nth-of-type(2){color:blue;font-weight:bold;}结果：nth-??child没有效果，nth-of-type高亮div3。为什么会这样？nth-child就是在一堆兄弟元素中找第二个元素，不管那个元素是什么，只要排在第二位即可。这里左边的div找到pgh2，右边的div找到div2。找到后，将其与之前的选择器进行匹配，如果匹配正确，则应用该样式。前面的选择器是p，意思是要求元素是p类型，但是这里都是标签，不匹配，这个样式不会应用到两个元素上。nth-of-type是在一堆兄弟元素中寻找相同HTML标记类型（MarkupType）元素的第二个元素。左边的div中，

pgh3

是p类型的第二个元素；在右侧的div中，

div3

是h5类型中的第二个元素。找到后，将其与之前的选择器进行匹配，如果匹配正确，则应用该样式。前面的选择器是h5，所以只有右边div的

div3

元素有样式，左边div的

pgh3

没有。因此，nth-child和nth-of-type的区别在于查找元素的方式。前者是在兄弟元素中寻找绝对位置的元素，后者是在同类元素中寻找绝对位置的元素。相同的是，都是先找到元素，然后再和前面的选择器进行匹配，这里的匹配方式是一样的。再往下延伸一点，查找的方式就很明确了，所以不管前面的选择器怎么变，最后都是先找到元素，再和前面的选择器匹配。也就是说，选择器与它们的查找方式无关。弄清楚这一点，这样您就不会被不同的组合搞糊涂了。p:nth-child(2)正确：找到第二个元素，这个元素就是p。错误：找到第二个元素p.info:nth-child(2)正确：找到类包含“info”的第二个元素。错误：查找其第二类包含“信息”的元素。p:nth-of-type(2)查找同一HTML标签类型中排名第二的元素，且该元素为p（或者直观地说，查找第二个p类型元素）.info:nth-of-type(2)查找类包含“info”的相同HTML标记类型的第二个元素