nth-of-type与nth-child的区别

　　　　　　　　某个元素:nth-of-type(n)这个CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。选择器选取父元素的第 n 个指定类型的子元素。

　　　　　　　　某个元素:nth-child(n)这个CSS 伪类首先找到所有当前元素的兄弟元素，, 用 n 来筛选出在当前元素的兄弟元素节点的位置。该选择器选取父元素的第n 个子元素，不论元素的类型。

　　　　　　　　我们可以注意到:nth-of-type他是当前元素的兄弟元素的第n个，而nth-child是当前元素的兄弟节点的第n个当前元素。

　　　　　　　　:nth-child()表示父元素下的第n个子元素。比如div p:nth-child(2)表示div下的第二的元素、如果不是p元素则没有匹配的元素 　:nth-of-type()表示父元素下的第ｎ个类型的元素　比如div p:nth-of-type(2)表示div下的第二个ｐ元素。

　　　　　　总结：

　　　　　　　　1.nth-child：按照个数来算。

　　　　　　　　nth-of-type：按照类型来计算，如果是class那么碰到不同类型的，单独一类，符合条件的选中。

　　　　　　　　2.在不指定类型时，nth-child(n)选中的是父元素下的第N个子元素。nth-of-type(n)选中的是父元素下的不同类型标签的第N个。

　　　　　　　　3.ele:nth-child(n)要求不仅仅是第n个子元素，并且这个子元素的标签是ele。ele:nth-of-type(n)选择的是父元素下ele标签的第二个

　　　　　　　　4。ele:last-child选中父元素下最后一个子元素，并且该子元素的标签必须为ele，否则一个都不选中。ele:last-of-type选中父元素下ele标签的最后一个.