css : nth-child 选取前三个元素，选取第三个和第六个之间的元素

今天做样式处理的时候，遇到了一个需要选中前三个元素的需求，当时不以为然，上手的时候却懵了😂

因为之前用的很随便，要么里面填一个数字，要么就是n*n + n的使用，没有很透彻的理解这个伪类的使用规则，所以专门去MDN上查了一下具体用法

element:nth-child(?an+b){
  your style code
}

1.当你使用n的时候，n就是匹配到的元素的编号[按顺序，从0开始，0 1 2 3...这样]
2.a是n的倍数
3.b是一个常量数字
4.an可选，非必填
5.切记！！ 只能写成 an+b ，不能写成 b+an

最终以 an+b 的 有效 计算结果来选去元素

 选取具体的位置的元素直接填入数字即可，也就是b
element:nth-child(3){
 选中第三个元素
}

选取偶数位置的元素，也就是an
element:nth-child(2n){
 选中偶数位置的元素
}

选取奇数位置的元素，也就是an+b
element:nth-child(2n+1){
 选中奇数位置的元素
}

那么如何只选取前三个元素呢？

也很简单
element:nth-child(-n+3){
比如你有五个匹配的元素，n是从0开始的，
-0+3=3
-1+3=2
-2+3=1
显然，从n=2开始，后面的结果就是无效结果了，所以匹配了前三个元素，后面两个不会生效该样式
-3+3=0
-4+3=-1

your css code

}

那么如何只选取第3个和第6个之间的元素呢？

element:nth-child(-n+6):nth-child(n+3){
 连在一起即可，注意前后顺序
 即可匹配第3456位置的元素！
}