在开发中，需要这样一个需求，需要找到第n个孩子元素。一时想不起来应该怎么写，经过查阅后得知。
因此记录一下，以免日后再忘记。
:nth-child 是CSS伪类，它首先找到所有当前元素的兄弟元素，然后按照位置 先后顺序从1开始排序 ，选择的结果为CSS伪类:nth-chilid括号中表达式（an+b）匹配到的元素集合。（n=0,1,2,3）。
tr:nth-child(2n+1)
表示表格中的奇数行
tr:nth-child(odd)
表示表格汇总的奇数行
tr:nth-child(2n)
表示表格中的偶数行
tr:nth-child(even)
表示表格中的偶数行
span:nth-child(0n+1)
表示子元素中第一个且为span的元素，与:first-child选择器的作用相同
span:nth-child(-n+3)
匹配前三个子元素中的span元素
https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child
nth-child可以选择单个元素，也可以实现一个范围，如:123456上面是一个列表1.选择单个标签元素（指定序列的单个元素）.li:nth-child(1){
color:
red}执行上面的CSS，1在界面上面表现为红色2.选择一个范围的标签元素（偶数序列的元素）
首先要更正一下，不存在first-of-child的，只有first-of-type下面就说说first-child与first-of-type的区别：
first-child：父元素的第一个子元素且必须符合指定类型
first-of-type：父元素的符合指定类型的第一个子元素
当然，光看文字也是很难理解的，下面看看例子：
<div>
<p>第1行</p>
<p>第2行</p>
<p>第3行</p>
</div>
这种情况下，不管是p:first-of-type还是p:first-child，<p>第1行</p>都会被选中。
而如果是：
<div>
<i>第1行</i>
<p>第2行</p>
<p>第3行</p>
<p>第4行</p>
</div>
则p:first-of-type的话，<p>第2行</p>会被选中；
而p:first-child的话，将没有任何元素被选中！
