在我们的网页展示效果中，往往有这样的需求：

比如在table标签显示的过程中，需要将1，3，5，7，9行显示为淡黄色，2，4，6，8，10行显示为淡绿色，即奇偶分别显示；

那么，这样的需求 CSS :nth-child(n) 选择器 是可以实现的。

语法

:nth-child(n) {
    /*样式*/
}
括号中的n可以表示为函数，也可以是偶数或奇数。
  • 奇数和偶数不用多说，1，3，5，7，9为奇数，2，4，6，8，10为偶数。
  • 函数为 (An+B)：其中 A 是整数步长，n是从0开始的任意正整数，B是整数偏移量。

对于函数的情况，举个例子：li:nth-child(3n+2) 

  • 当n=1时 3*0+2=2
  • 当n+2时 3*1+2=5
  • ......
  • 依次类推

例子

1）CSS :nth-child(n) 选择器 函数例子

<!DOCTYPE html> 
<html> 
    <head> 
        <title>CSS :nth-child 选择器例子</title> 
        <style>  
            ul li:nth-child(3n+2) { 
              background: yellow; 
              color: black; 
			  font-size:20px;
            } 
        </style> 
    </head> 
    <body > 

        <h3> 
            yxjc123.com  CSS :nth-child 选择器例子
        </h3> 
      
        <ul id="article_list">

        <li><a href="#">第1篇文章</a></li>
        <li><a href="#">第2篇文章</a></li>
        <li><a href="#">第3篇文章</a></li>
        <li><a href="#">第4篇文章</a></li>
        <li><a href="#">第5篇文章</a></li>   
        <li><a href="#">第6篇文章</a></li>   

    </ul>
    </body> 
</html>
CSS :nth-child(n) 选择器

2) CSS :nth-child(n) 选择器 奇偶例子

 <!DOCTYPE html> 
<html> 
    <head> 
        <title>CSS :nth-child 选择器</title> 
        <style>  
	    table th {
		padding: 7px 5px;
	    border: 1px solid #ccc;
		background-color: #c7ccbe;
		color: #444;
	    }
             tr:nth-child(even) { 
              background: yellow; 
              color: black; 
            } 
            tr:nth-child(odd) { 
              background: blue; 
              color: white; 
        </style> 
    </head> 
    <body> 
        <h3> 
           yxjc123.com CSS :nth-child 选择器例子
        </h3> 
      
	<table>
	<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
	<tr><td>1</td><td>张三</td><td>21</td></tr>
	<tr><td>2</td><td>李四</td><td>21</td></tr>
	<tr><td>3</td><td>王五</td><td>24</td></tr>
	<tr><td>4</td><td>赵六</td><td>25</td></tr>
	<tr><td>总数</td><td>4</td><td> </td></tr>
</table>
       
    </body> 
</html>
输出：

CSS :nth-child(n) 选择器