css：nth-child(n)

最新推荐文章于 2024-07-05 14:58:07 发布

不秃头的LT

最新推荐文章于 2024-07-05 14:58:07 发布

阅读量214

点赞数

分类专栏： VUE 文章标签： css

本文链接：https://blog.youkuaiyun.com/firstlt0217/article/details/114920576

版权

VUE 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了CSS中各种选择器的应用，包括如何通过:nth-child(n)、:nth-last-child(n)等选择特定位置的元素，以及如何组合使用这些选择器来限定选择范围。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/* 选择第n个，n位数字  */
:nth-child(n)
 
选择列表中的偶数标签
:nth-child(2n)
 
选择列表中的奇数标签
:nth-child(2n-1)
 
选择前几个元素
/*【负方向范围】选择第1个到第6个 */
:nth-child(-n+6){}
 
从第几个开始选择
/*【正方向范围】选择从第6个开始的，直到最后  */
:nth-child(n+6){}
 
两者结合使用，可以限制选择某一个范围
/*【限制范围】选择第6个到第9个，取两者的交集【感谢小伙伴的纠正~】 */
:nth-child(-n+9):nth-child(n+6){}
.top-title div:nth-child(-n+6) {
  float: left;
}
.top-title div:nth-child(n+6):nth-child(-n + 9) {
  float: right;
}
选择列表中的倒数第n个标签 n为数字
:nth-last-child(n)