这里首先要区分nth-of-type(n)和nth-child(n)的区别：
nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
nth-child(n) 选择器选取父元素的第 N 个子元素，与类型无关
写个demo理解：
<div class="container"><div>div1</div><p>p1</p><div>div2</div><div>div3</div></div>
.contaicer>div:nth-of-type(2){color: red;}
可以看到文字颜色变红的是第二个div。
如果是用nth-child(n)来写呢？我们看下效果：
.container>div:nth-child(2){color: red;}
为什么并没有字体变成红色呢？
.container>div:nth-child(2)找的是container下第二个子元素，如果这个元素是div，则字体颜色变红，否则则没有变化。
.container>div:nth-child(3){color: red;}
.container>div:nth-child(3)找的是container下第三个子元素，这个元素是div，字体变红。
如果是父元素下的子元素有很多类名不同的子元素，我们需要对其中一个类名中的某个元素做操作呢？
<div class="container"><div class="active">active1</div><div class="abc">abc</div><div class="active">active2</div><div class="abc">abc</div><div class="active">active3</div><div class="active">active4</div></div>
类名为container的父元素下有2个类名为abc的子元素，4个类名为active的子元素。
我想让第二个类名为active的子元素字体颜色为红色。
.container .active:nth-of-type(2){color: red;}
通过.container .active:nth-of-type(2)这个选择器设置了样式之后发现第二个类名为active的元素字体颜色并没有发生变化，我们打印这个选择器看看：
从图上可以看出，类名为active的元素有4个，但是.container .active:nth-of-type(2)这个选择器并没有获取到元素。
这是为什么呢？
nth-of-type(n) 是根据类型获取元素的，跟类名其实没有关系，这个选择器实际上获取的是container下的第二个div元素，如果这个元素的类名为active，则样式发生变化，如果不是，则获取不到这个元素。
我们这个例子当中，container下的第三个div元素类名是active，我们来对第三个元素进行操作：
.container .active:nth-of-type(3){color: red;}
现在就可以获取到元素啦。
所以一定要注意的是：nth-of-type(n) 这个选择器是根据元素的类型进行选择，跟类名没有关系。
就着这个例子再来说一下jQuery通过el.index()获取元素下标的问题。
还是刚刚那个例子，如果我们要通过jQuery获取第二个类名为active的元素的下标。
先给类名为active的div绑定点击事件
$('.active').on('click',function(){console.log($(this).index());});
按照我们的逻辑来说，我们希望的 也应该输出的 是下图这样的：
但是实际输出的结果却是：
诶？这是什么呢？为什么输出的是0 2 4 5？
通过观察我们可以发现，0 2 4 5 分别是类名为active的div在父元素中所有元素所对应的索引。
也就是说不管你是通过什么获取的，调用index()这个方法获取的都是相对于父元素的下标。
index() 方法返回指定元素相对于其他指定元素的 index 位置。
这些元素可通过 jQuery 选择器或 DOM 元素来指定。
注释：如果未找到元素，index() 将返回 -1。
注意文档说的是相对于其他指定元素。
这个方法可以传一个参数，也就是相对的元素
获得元素相对于选择器的 index 位置。
该元素可以通过 DOM 元素或 jQuery 选择器来指定。
回到这个例子，如果我们这么写输出的结果就是我们想要的结果了：
$('.active').on('click',function(){console.log($(this).index('.active'));});
这是说输出点击的元素相对于active这个类名的索引。如果不传就是相对于点击元素的父元素。
如果觉得《css获取父元素下第几个元素出坑和JQuery通过index()获取下标出坑方法》对你有帮助，请点赞、收藏，并留下你的观点哦！
