---恢复内容开始---
nth-of-type这一类的选择器是针对同类型的子元素进行计算；
nth-child这一类的先择器是连同父元素中的所有子元素一起计算；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*h2:nth-child(even){*/ /*background: blue;*/ /*}*/ /*h2:nth-child(odd){*/ /*background: aquamarine;*/ /*}*/ h2:nth-of-type(even){ background: blue; } h2:nth-of-type(odd){ background: yellowgreen; } </style> </head> <body> <div> <h2> 标题1</h2> <p>内容 ......三万字</p> <h2>标题2</h2> <p>内容 ......三万字</p> <h2>标题3</h2> <p>内容 ......三万字</p> <h2>标题4</h2> <p>内容 ......三万字</p> <h2>标题5</h2> <p>内容 ......三万字</p> <h2>标题6</h2> <p>内容 ......三万字</p> </div> </body> </html>
标题1
内容 ......三万字
标题2
内容 ......三万字
标题3
内容 ......三万字
标题4
内容 ......三万字
标题5
内容 ......三万字
标题6
内容 ......三万字
还有相似的有选择器nth-last-child和nth-last-of-type;