css类选择器nth-child用法

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

cmj8043719242

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

阅读量324

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/cmj8043719242/article/details/129898746

版权

文章介绍了CSS中的nth-child(n)选择器，它用于匹配父元素的第N个子元素。通过示例展示了如何使用nth-child(2n)选择偶数标签使其变为红色，以及nth-child(2n-1)选择奇数标签变为绿色，从而实现列表项的交替颜色效果。

摘要由CSDN通过智能技术生成

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

n 可以是数字、关键词或公式

<p class="css">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
</p>


<style>
    //此时2,4会变红色
  css span:nth-child(2n){
       color:red; 
  }
 //此时1,3会变绿色
 css span:nth-child(2n-1){
       color:green; 
  }

</style>

选择列表的偶数标签:nth-child(2n)

选择列表的奇数标签:nth-child(2n-1)