CSS的:nth-child选择器：如何选择相同元素中指定的元素

深碍√TFBOYSˉ_ 2022-05-21 03:22 389阅读 0赞

**现象：**  
CSS中出现多个相同元素需要获取，依次给所有元素写class或者id又太麻烦

**方法：**  
使用CSS的:nth-child选择器

一：首先写一个div容器 里面写了五个div 颜色都设置为了红色（为了方便区分）  
![这里写图片描述][70]

二：获取div中的第一个 改变他的颜色  
使用:nth-child(number)  
直接匹配第number个元素。参数number必须为大于0的整数。  
括号里面的数字为第几个div根据这个数字可以选择你想要改变的div  
![这里写图片描述][70 1]

三：也有其他方法 获取第一个div  
使用:not(:first-child)  
![这里写图片描述][70 2]

四：如果要改变多个div应该怎么写呢？  
:nth-child(n+2) 其中nth-child表示第几个son，n+2表示从第二个开始(即所有的n都是取从0开始的自然数)  
![这里写图片描述][70 3]

五：如果要获取除了最后一个所有的div呢  
:nth-last-child(n+2) 这样获取除最后一个div中所有的div  
![这里写图片描述][70 4]

六：第二种获取除最后一个元素的其他div的方法  
使用:not(:last-child)  
![这里写图片描述][70 5]

七：如果要获取除最后两个div以外其他所有的div  
:nth-last-child(n+3) 在第五步的基础上修改数字  
![这里写图片描述][70 6]

八： 获取2的倍数所有元素  
:nth-child(an)  
匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n。  
![这里写图片描述][70 7]

九：奇偶匹配  
奇数匹配使用:nth-child(odd)  
偶数匹配使用：:nth-child(even)  
例子：  
![这里写图片描述][70 8]

![这里写图片描述][70 9]

[70]: /images/20220521/4eeb48d4982841f395fde9821d1553b7.png
[70 1]: /images/20220521/e9d16ec21f3b465893c8032267e730d1.png
[70 2]: /images/20220521/071f98a3a6e249c6a7b182dbe24e5af8.png
[70 3]: /images/20220521/5c67a3d7d228418e81385f5417089258.png
[70 4]: /images/20220521/ee73756b596c4bf6b31f188b56b067db.png
[70 5]: /images/20220521/5383b74cc79d496bb306cec0c67d037b.png
[70 6]: /images/20220521/0c7dffcb80c24db2b9428e3d73d2c83a.png
[70 7]: /images/20220521/e83d266765324f42ba49ef401413fd7a.png
[70 8]: /images/20220521/caa9e8bc483b47249795dd5fc16e72c7.png
[70 9]: /images/20220521/afb8be3c656441e19f83eb2a82c0c8fc.png