css选择类的第⼏个元素,css选择器怎么选取第⼏个元素
css选择器选取第⼏个元素的⽅法：1、使⽤“first-child”选择器选取属于其⽗元素的⾸个⼦元素；2、使⽤“last-child”选择列表中的最后⼀个标签；3、使⽤“nth-child(3)”选择第3个标签等等。
本⽂操作环境：windows7系统、HTML5&&CSS3版本、Dell G3电脑。
css选择器分为哪几类css⽤选择器选取第⼏个元素？
css怎么⽤选择器选取第⼏个元素？下⾯本篇⽂章来给⼤家介绍⼀下CSS使⽤选择器实现选取第⼏个元素效果的⽅法。有⼀定的参考价值，有需要的朋友可以参考⼀下，希望对⼤家有所帮助。
在前端开发中，我们可能会碰到这样的需求：想让列表中的第⼀个部分显⽰不同的样式 ，想让列表中的偶数部分显⽰不同的背景颜⾊，想让列表中的最后⼀部分样式不⼀样……这样的需求，我们怎样来实现？
其实，如果前⾯⽂件是php开发的，可以通过php的循环语句+判断语句+css样式来实现。但是，如果是静态代码，php就⽆法⽤了。
这时，我们还可以通过CSS来实现，CSS给我们提供了⼏个⾮常有⽤的样式参数：first-child、last-child、nth-child(n)。下⾯，详细看⼀下它们的使⽤。
1、first-child
first-child选择器⽤于选取属于其⽗元素的⾸个⼦元素的指定选择器。
选择li 列表中的 第⼀个li模块的背景颜⾊。
li:first-child{background:#090}
2、last-child
last-child表⽰选择列表中的最后⼀个标签，代码如下：
li:last-child{background:#090}
3、nth-child(3)
表⽰选择第3个标签，代码如下：
li:nth-child(3){background:#090}
上⾯代码中的3也可以改成其它数字，如4、5等。想选择第⼏个标签，就填写⼏。
4、nth-child(2n)
这个表⽰选择列表中的偶数标签，即选择 第2、第4、第6…… 标签。
5、nth-child(2n-1)
这个表⽰选择列表中的奇数标签，即选择 第1、第3、第5、第7……标签。
6、nth-child(n+3)
这个表⽰选择列表中的标签从第3个开始到最后。
7、nth-child(-n+3)
这个表⽰选择列表中的标签从0到3，即⼩于3的标签。
8、nth-last-child(3)
这个表⽰选择列表中的倒数第3个标签。
推荐：《css视频教程》

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。