概述 nth-of-type selector
返回值：jQuery
描述：选择同属于一个父元素之下，并且标签名相同的子元素中的第n个。
index: 每个相匹配子元素的索引值，从1开始，也可以是字符串 even 或 odd，或一个方程式( 例如 :nth-of-type(even), :nth-of-type(4n))。
因为jQuery的实现:nth-是严格来自CSS规范，n值是“1-indexed”，也就是说，从1开始计数。对于所有其他选择器表达式比如:eq() 或 :even ，jQuery遵循JavaScript的“0索引”的计数。
这个不寻常的用法，可进一步讨论中找到W3C CSS specification.
:nth-of-type()选择器是jQuery 1.9新增的选择器，它是遵循CSS 3中结构性伪类选择符 E:nth-of-type(n)实现的。和CSS 3中结构性伪类选择符 E:nth-of-type(n)一样，它选择的是匹配所有父元素下同类型中的第n个同级兄弟元素E。
:nth-of-type()选择器和 :nth-child()选择器很容易混淆，至少我是这么认为的。看下面一个示例：
<div class="test"> <p>A元素</p> <div>B元素</div> <p>C元素</p> <p>D元素</p> </div>
看下面的代码
$("p:nth-of-type(2)")//选择的是C元素
$("p:nth-child(2)")//什么元素也没选中
两者比较：
p:nth-of-type(2)选择器选择父元素的第二个段落p元素 ，它不管段落p元素在什么位置，段落p元素可能是该父级元素的第3个或者第5个，也可以是第n个子元素，这里n肯定大于2，只要父级元素<div class="test">有两个以上的段落p子元素，他就肯定能选择到第二个段落p元素。
p:nth-child(2)选择器选择不到任何元素，p:nth-child(2)选择器要满足的条件是：
<div class="test">的第二个子元素是div元素，而不是p元素，所以不满足条件，这样就选择不到任何元素
示例
查找每个span，这个 span 是 其所有兄弟span元素中的第二个元素。
<div>
<span>John</span>
<b>Kim</b>
<span>Adam</span>
<b>Rafael</b>
<span>Oleg</span>
</div>
<div>
<b>Dave</b>
<span>Ann</span>
</div>
<div>
<i><span>Maurice</span></i>
<span>Richard</span>
<span>Ralph</span>
<span>Jason</span>
</div>
$("span:nth-of-type(2)");
查找每个span，这个 span 是 其所有兄弟span元素中的第二个元素。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>nth-of-type demo</title>
<style>
.nth {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>
<span>John</span>,
<b>Kim</b>,
<span>Adam</span>,
<b>Rafael</b>,
<span>Oleg</span>
</div>
<div>
<b>Dave</b>,
<span>Ann</span>
</div>
<div>
<i><span>Maurice</span></i>,
<span>Richard</span>,
<span>Ralph</span>,
<span>Jason</span>
</div>
<script>
$( "span:nth-of-type(2)" )
.append( "<span> is 2nd sibling span</span>" )
.addClass( "nth" );
</script>
</body>
</html>
运行一下