nth-child----一个CSS样式选择器_input checked: nth-child 格式作用含义-优快云博客

本文链接：https://blog.youkuaiyun.com/wangzhi_821/article/details/4489294

本文详细介绍了CSS中的:nth-child(an+b)选择器的使用方法，包括其语法和如何选择奇数行或偶数行等示例。通过具体实例展示了如何为DOM树中的特定位置元素设置样式。

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

:nth-child(2n) 是CSS的一个选择器，对于在DOM树中有an+b-1个兄弟节点的元素，通过:nth-child可以选择哪些元素应用样式。这些兄弟节点中编号从1开始。
语法：element:nth-child(an + b) { style properties }
表示element对应的元素中，第an+b（n可以使任意整数）个元素应用该CSS样式；

一些简单的例子：

tr:nth-child(2n+1) ：表示表中奇数行将显示这个定义的样式

tr:nth-child(odd)
：

表示表中奇数行将显示这个定义的样式 tr:nth-child(2n) : 表示表中偶数行将显示这个定义的样式 tr:nth-child(even) ： 表示表中偶数行将显示这个定义的样式
示例：

Css代码
span:nth-child(2n+1)
{
     background-color: lime;
}

Html代码
   1. < div >
   2.     < span > This span is limed! </ span >
   3.     < span > This span is not. :( </ span >
   4.      < span > But this one is! </ span >
   5.      < span > Sadly, this one is not... </ span >
   6. </ div >

<div>  
    <span>This span is limed!</span>  
    <span>This span is not. :(</span>  
     <span>But this one is!</span>  
     <span>Sadly, this one is not...</span>  
</div>

结果将是：

   This span is limed!

   This span is not. :(

   But this one is!

   Sadly, this one is not...