来讲讲：CSS实例教程：:nth-child和:nth-type-of的区分

搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。
破洛洛文章简介：:nth-child和:nth-type-of的区分.
原文：TheDifferenceBetween:nth-childand:nth-of-type
译文：:nth-child和:nth-type-of的区分
假定有以下HTML代码：

1. <section><p>Little</p><p>Piggy</p><!--方针元素--></section>

复制代码

以下代码失掉的效果一样：

1. p:nth-child(2){color:red;}p:nth-of-type(2){color:red;}

复制代码

了局固然不异，可是二者自己仍是有所区分的。

:nth-child选择符从词义下去说，暗示，
选择满意以下前提的元素：

• 1.是一个段落元素p
  
• 2.是父元素的第二个子元素
  

:nth-of-type选择符从词义下去看，暗示：

• 1.选择父元素的第二个段落元素p
  

:nth-of-type是…怎样说好呢，哈~…较少前提要约的。
假定布局变更以下：

1. <section><h1>World</h1><p>Little</p><p>Piggy</p><!--方针元素--></section>

复制代码

那末，这类体例就“破”了：

1. p:nth-child(2){color:red;}

复制代码

可是，这个仍是”能用”的：

1. p:nth-of-type(2){color:red;}

复制代码

所谓的“破”，意义是下面的:nth-child选择符如今选到的是“Little”，而不是“Piggy”，由于这个元素满意以下一切前提：

• 1)它是第二个字元素
  
• 2）它是一个段落元素p
  

所说的“能用”，意义是“Piggy”仍旧被选中，由于它是它父元素下的第二个段落元素p。
假如在h1以后增添一个h2，那末:nth-child选择符就甚么也选中不了了，由于当时第二个子元素就不再是段落元素p了。可是:nth-of-type仍旧仍是无效的。
我感到:nth-of-type绝对不那末懦弱，并且总的来讲加倍有效，只管:nth-child加倍罕见（作者团体定见）。你有几时分在想“我想选择父元素的第二个子元素，假如它刚巧是个段落元素p”这事呢？大概有那末几回，可是更多的多是你想“选中第二个段落”大概“每隔两行选择一行(selecteverythirdtablerow)”，也就是说:nth-of-type是加倍好的一个选择（再次声明，作者团体定见）。
我发明当我埋怨“为何:nth-child选择符不可？”时，相对多半的情形是由于在选择符前限制了标签，而谁人地位的子元素不是谁人标签。因而在利用:nth-child时，我以为最好仍是只指定父元素而且不要用标签来限定:nth-child。

1. dl:nth-child(2){}/*保举*/dd:nth-child(2){}/*不是很好*/

复制代码

固然，详细情形还得详细剖析。（我咋这么不喜好这句话呢&ndash;糖伴西红柿）
扫瞄器关于:nth-of-type的撑持是相称不错的…Firefox3.5+,Opera9.5+,Chrome2+,Safari3.1+,IE9+。假如必要更多的撑持，jQuery应当会挺你的（利用选择符，增加一个类名，利用类名来增加款式$(“selector:nth-child(xxxxx)”).addClass(“someClass”)），可是实践上jQuery却保持了对:nth-of-type的撑持，这很奇异啊，听说是由于:nth-of-type的利用率很低。有个插件可使得jQuery撑持它。
相干：不要忘了它这些了不得姊妹们:first-of-type:last-of-type:nth-last-of-type和:only-of-type。更多请看这里。
这里有一个LeaVerou做的可视化示例。
</p>
CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。