nth-child是一个伪类，它为挑选器增加前提，并许可您将款式运用于子元素的第n个（nth）。
当你想要交替设置背景色彩以便在包括很多项目的表格中轻松检察时，nth-child就变得异常有效。
下面我们就来看nth-child的运用方法
nth-child的形貌以下
元素:nth-child(值){款式的内容}
除了数字，2n + 1和一些数学表达式以外，even（偶数）等能够被设置为值。
仅运用于偶数时： 2n或even
仅运用于奇数： 2n+1或odd
另有其他状况，下面我们来看细致的运用实例
起首HTML代码以下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <ul type="square"> <li>列表项目1</li> <li>列表项目2</li> <li>列表项目3</li> <li>列表项目4</li> <li>列表项目5</li> <li>列表项目6</li> </ul> </body> </html>
运转结果以下图所示
接着运用nth - child，并举行设置，使背景色彩成为＃add8e6，仅运用于特定的列表项目。
挑选偶数时的状况
nth-child的值设置为even或许2n
CSS代码
ul li:nth-child(even){
background-color: skyblue;
}
在浏览器上显现以下结果
挑选奇数时的状况
nth-child的值设置为odd或许2n+1
CSS代码
ul li:nth-child(odd){
background-color: skyblue;
}
在浏览器上显现以下结果
仅挑选第n个元素的状况
输入要运用于nth-child值的项目编号。我们在这里输入3。
CSS代码
ul li:nth-child(3){
background-color: skyblue;
}
在浏览器上显现结果以下
挑选第n个及以上的元素的状况
n+到nth - child输入要最先运用的项目的数值。这里是n+4。
CSS代码
ul li:nth-child(n+4){
background-color: skyblue;
}
在浏览器上运转结果以下
以上就是CSS伪类nth-child怎样运用的细致内容，更多请关注ki4网别的相干文章！
