:nth-child()可以选择某个的一个或多个特定的子元素，你可以按这种方式进行选择：
:nth-child();/参数是具体数字/
:nth-child(n);/参数是n,n从0开始计算/
:nth-child(n)/n的倍数选择，n从0开始算*/
:nth-child(n+);/选择大于后面的元素/
:nth-child(-n+)/选择小于前面的元素/
:nth-child(n+1);/表示隔几选一*/
//上面为整数
:nth-child()可以定义他的值(值可以是整数，也可以是表达式)，如上面所示，用来选择特定的子元素，对于这个我们直接看实例，比我说的更好理解。
:nth-child(3),选择某元素下的第三个子元素css中伪类选择器，(这里的3可以是你自己需要的数字)，比如说，我需要选择列表中的第三个li元素，那么我们可以直接这样使用：
.demo li:nth-child(3) {: lime;}
效果如下所示：
这种不式不能引用负值，也就是说li:nth-child(-3)是不正确的使用方法。
:nth-child(n)，其中n是一个简单的表达式，那么"n"取值是从“0”开始计算的，到什么时候结束我也不知道，如果你在实际应用中直接这样使用的话，将会选中所有子元素，比如说，在我们的demo中，你在li中使用":nth-child(n)",那么将选中所有的"li",如：
.demo li:nth-child(n) {: lime;}
等于
.demo li {: lime;}
他其实是这样计算的
n=0 －－》 没有选择元素
n=1 －－》 选择第一个li,
n=2 －－》 选择第二个li,后在的依此类推，这样下来就选中了所有的li
请看效果：
请注意了，这里的“n”只能是"n"，不能使用其他字母代替，不然会没有任何效果的。
:nth-child(2n),这中方式是前一种的变身，我们可以选择n的2倍数，当然其中“2”可以换成你自己需要的数字css中伪类选择器 css伪类选择器记忆技巧,CSS3 伪类选择器 :nth-child()，如：
.demo li:nth-child(2n) {: lime;}
等于
.demo li:nth-child(even) {: lime;}
我们来看一下其计算的过程：
n=0 －－》 2n=0 －－》 没有选中任何元素，
n=1 －－》 2n=2 －－》 选择了第二个li
n=2 －－》 2n＝4 －－》 选择了第四个li，后面的依此类推
如果是“2n”这样跟我们以使用"even"命名class定义样式，所起到的效果是一样的，如图所示：
“:nth-child(2n)”也等于":nth-child(even)"效果。
:nth-child(2n-1),这个选择器是在":nth-child(2n)"基础上演变过来的，上面说了人是选择偶数，那么我们在他的基础上减去“1”就变成奇数选择，如：
.demo li:nth-child(2n-1) {: lime;}
我们来看看其实现过程
n=0 －－》 2n-1=-1 －－》 也没有选中任何元素，
n=1 －－》 2n-1=1 －－》 选择第一个li
n=2 －－》 2n-1=3 －－》 选择第三个li,后面的依此类推
其实实现这种奇数效果，我们还可以使用":nth-child(2n+1)"和":nth-child(odd)",一起来看他们的效果
:nth-child(n+5)这个选择器是选择从第五个元素开始选择，这里的数字你可以自己定义，如：
.demo li:nth-child(n+5) {: lime;}
按前面的计算方法，我们来看看，
n=0 －－》 n+5=5 －－》 选中第5个li
n=1 －－》 n+5=6 －－》 选择第6个li，后面的就不列出来了，原理一样
你可以使用这种方法选择你需要开始选择的元素位置，也就是说换了数字，起始位置就变了，看下在的效果图：
:nth-child(-n+5)这种选择器刚好和上面的选择器相反，这个是选择第5个前面的，如：
.demo li:nth-child(-n+5) {: lime;}
如果不清楚怎么一回事，你只要计算一下就明白了
n=0 －－》 -n+5=5 －－》 选择了第5个li
n=1 －－》 -n+5=4 －－》 选择了第4个li
n=2 －－》 -n+5=3 －－》 选择了第3个li
n=3 －－》 -n+5=2 －－》 选择了第2个li
n=4 －－》 -n+5=1 －－》 选择了第1个li
n=5 －－》 -n+5=0 －－》 没有选择任何元素
从上面的计算方法中，大家很清楚的知道是怎么得来的，最后我们一起看看效果吧：
:nth-child(4n+1)这种方法是实现隔几选一的效果css中伪类选择器，比如我们这里是隔三选一，如果你把"4"换成别的数字那就是另外的一种隔法了，比如这个实例
.demo li:nth-child(4n+1) {: lime;}
我们主要来看其计算出来的结果
n=0 －－》4n+1=1 －－》选择了第一个li
n=1 －－》4n+1=5 －－》选择了第五个li
n=2 －－》4n+1=9 －－》选择了第九个li
效果如下
IE6-8和FF3-浏览器不支持":nth-child"选择器。
原文链接：
参考:
CSS3 伪类选择器 nth-child() 的用法
伪类选择器 nth-child() 在IE6-8和FF3.0-浏览器不支持,CSS3中nth-of-type(n)(比如nth-of-type(1))这个特殊的类选择符可以样式更加个性的标题和段落等, ...
实现隔行变色、悬停变色 ( CSS3伪类选择器：nth-child() )
实现隔行变色
文章来源:https://blog.csdn.net/weixin_32801895/article/details/119399343