先裱起来！
在使用CSS的过程中，我们几乎都用到过 nth-child() 选择器，它主要是根据父元素内的所有兄弟元素的位置来选择子元素。
其基本用法相信大佬们都有实践过或者见到过，在这里也提一嘴 （怕内容太少
0) 基础结构与样式
为方便演示效果，附加一下基本的HTML结构如下
<article>
<p>这是第 1 个段落</p>
<p>这是第 2 个段落</p>
<p>这是第 3 个段落</p>
<p>这是第 4 个段落</p>
<p>这是第 5 个段落</p>
<p>这是第 6 个段落</p>
<p>这是第 7 个段落</p>
<p>这是第 8 个段落</p>
<p>这是第 9 个段落</p>
<p>这是第 10 个段落</p>
</article>
如果你需要在开发中输入类似有相同结构的html时，你可以使用 emmet 的快速输入哦！以vscode为例，你只需要在编辑器中输入
article>p*10{这是第 $ 个段落 }，然后回车即可。
默认颜色为 darkcyan
p {
color: darkcyan;
}
1) 
单个选择
这个是最常使用的，直接写入需要选择的次第即可，如选择第5个：
p:nth-child(5) {
color: deeppink;
}
效果见下图1。
2) 
奇偶选择
奇偶选择的实用性也相对频繁。
- 使用关键字
odd表示奇数选择； - 使用关键字
even表示偶数选择。
p:nth-child(odd) {
color: deeppink;
}
效果见下图2。以奇数为例。
3) 
前x个 后x个
这个的使用程度上，或许比奇偶还频繁，规律如下：
- 前5个：-n+5;
- 后5个：n+5。
p:nth-child(-n+5) {
color: deeppink;
}
注意：n必须在前面，不要试图将
-n+5写成5-n，正数同理。另外，这里后5个中的
n+5代表的含义是 从第5个开始选，不是代表个数！ 因为例子中总计10个，以免引起歧义，作下说明。
效果见下图3。以前5个为例。
4) 
分组选择与倒序选择
适用于一些特殊需求场景。例如每3个选择一个，每4个选择一个等。
这类的选择相对来说较为复杂一点，大鹅在这里根据自己使用的经验做几点简单总结：
- 将系数看作是一个组的容量，若无加数，则选择每组最后一个；
- 将后面的加数看作是选择当前组中的第x个；
- 后面数字为负数的话，可以看成是倒序数(从0开始)；
- 若后面加数大于系数，可以看成是从第 (加数/系数) 向上取整的组开始选以及 这些组第 (加数/系数) 余数部分的次序；
- 若是加数为负且大于系数，那就是在组内倒数循环，可将其加数简化为 （加数/系数）所得余数，然后规则同 3。
关于上述几点，我以下列代码来说明：
p:nth-child(3n+2){
color: deeppink;
}
- 这里就是以 3 个为一组，没有系数的话，就选择最后一个。见下图1；
- 加数为 2 ，所以我们选择的就是每3个一组中的第2个，见下图2；
- 如果是
3n-1那就是选每一组倒数第二个（从0开始数）； - 如果后面加数大于系数，例如
3n+5，那就是 (7/3)=2.333=2···1。意味着从 第 3 组开始选择，选每一组的第 1 个。再例如3n+6，这是能除尽的，余数为0则选择的是最后一个,那么这个就是从第2组开始，每组最后一个。见下图4。 - 如果是
3n-5，那就可以看成是3n-2，然后按照第3条规则，就是选择每组倒数第 3 个。
前面3条倒是还好，最后两个其实我们都是可以用前面的方法代替，没必要硬来把自己绕晕，例如
3n+5，那我们就直接将5个编组不就行了嘛！3n-1也可以转为3n+2呀~ 干嘛非要去玩倒数来秀晕自己捏~在这里列举出来，主要是因为我真见过这么做的，把自己绕晕然后来问我的，在此作个补充说明！
5) 
区间选择
区间选择通常是用来选择某个区间内的元素，例如：我们需要选择 第2个到第9个之间的元素，使用我们之前的几种，好像都不太好操作，因此我们需要用到本节所介绍的范围选择！
先上代码，再做解释。
p:nth-child(-n+9):nth-child(n+2){
color: deeppink;
}
以从2到9为例，既然是选择一个范围，那我们可以分为三步走：
- 先选择前面9个；
- 再从第二个开始选；
- 取交集 ∩
那么上述代码也就容易理解了。
这里我们使用串联两个选择器来取交集哦！
额外拓展一下：
我们也可以使用 :not() 选择器来排除。
本例中，我们也可以选择前9个，然后排除掉第1个，代码如下：
p:nth-child(-n+9):not(:nth-child(1)){
color: deeppink;
}
效果见下图1。
6) 
区间内过滤
上述区间选择中，我们选择了从第2个到第9个。现在你的老板灵光一闪，说在这个基础上，我不要第5个！于是你 桌子一拍 脑门一拍，想起了大鹅说了可以使用 :not() 选择器来嵌套！你就写出了如下代码：
p:nth-child(-n+9):nth-child(n+2):not(:nth-child(5)){
color: deeppink;
}
效果如下图2。
你的老板微微一笑，吃完午饭，他又觉得不对劲，他其实是不想要其中的 第5个到第7个！
他来到你工位前，把你脑门一拍，于是你 反手一拳 也脑门一拍，瞬间打通了任督二脉，想起了大鹅不仅讲了区间选择器，还讲了能用not来排除，你快速地把大鹅之前说的进行了神奇的组合，写出了如下代码：
p:nth-child(-n+9):nth-child(n+2):not(:nth-child(-n+7):nth-child(n+5)){
color: deeppink;
}
效果见下图3。
老板满意的离开了。你正高兴呢，老板似乎想起了什么了不得的东西，急速狂飙到你工位前，温和地跟你说：原来第6个是我想要的！从第2个到第9个之间，把5到7排除，然后把6留着！
你再也忍不住了，于是你 抄起菜刀 猛的站起来又缓缓坐了下去，你疯狂整理思绪，又想起了大鹅讲的东西，你思索着：既然not可以嵌套，那可不可以再套一次呢？你尝试着写了下去：
p:nth-child(-n+9):nth-child(n+2):not(:nth-child(-n+7):nth-child(n+5):not(:nth-child(6))){
color: deeppink;
}
当效果（见下图4）出来的那一刻，你老板连忙凑过来，说道：对对对！就是这样！这个字再大点
你嘴角微微一提，一脸风轻云淡地等着老板再出招！
确认老板没有新的灵感后，你又把前面的知识点过了一遍，发现这个6其实不就是偶数吗？如果他不要的的是某个区间内的偶数，那直接用 even 就行了嘛！你直夸自己聪明，能够举一反三，灵活应用。
然后回来给大鹅点了个赞 
往期选择器相关：
