为了使表格更易于阅读，对具有交替背景颜色的行进行样式设置通常很有帮助。样式表的最常用方法之一是设置每隔一行的背景颜色。这通常被称为“斑马条纹”。
您可以通过使用CSS类设置每个其他行然后定义该类的样式来实现此目的。这可行，但不是最好或最有效的方法。使用此方法时，每次需要编辑该表时，可能必须编辑表中的每一行以确保每行与更改一致。例如，如果向表中插入一个新行，则其下面的每一行都需要更改该类。
CSS可以很容易地为斑马条纹样式设置样式。您不需要添加任何额外的HTML属性或CSS类，只需使用：nth-of-type（n）CSS选择器。
：nth-of-type（n）选择器是CSS中的结构伪类，它允许您根据元素与父元素和兄弟元素的关系来设置元素的样式。您可以使用它根据源顺序选择一个或多个元素。换句话说，它可以匹配作为其父类的特定类型的第n个子元素的每个元素。
字母n可以是关键字（例如奇数或偶数），数字或公式。
例如，要使用黄色背景颜色设置每个其他段落标记的样式，您的CSS文档将包括：
p：nth-of-type（odd）{ 背景：黄色;}
从HTML表开始
首先，像通常用HTML编写的那样创建表。不要向行或列添加任何特殊类。
在样式表中，添加以下CSS：
tr：nth-of-type（odd）{ 背景色：#CCC;}
这将使每个其他行的样式具有从第一行开始的灰色背景颜色。
样式交替列以相同的方式
您可以对表中的列执行相同类型的样式设置。为此，只需将CSS类中的tr更改为td即可。例如：
td：nth-of-type（odd）{ 背景色：#CCC;}
在nth-of-type（n）选择器中使用公式
选择器中使用的公式的语法是+ b。
- a是表示循环或索引大小的数字。
- n实际上是字母“n”，代表一个计数器，它的星形为0。
- +是一个运算符，也可能是“ - ”
- b是一个整数并表示偏移值 - 例如，选择器开始应用背景颜色应该减少多少行。如果运算符包含在公式中，则需要这样做。
例如，如果要为每第3行设置背景颜色，则公式将为3n + 0。您的CSS可能如下所示：
tr：nth-of-type（3n + 0）{ 背景：slategray;}
使用nth-type-Selector的有用工具
如果您对使用伪类nth-of-type选择器的公式方面感到有些畏惧，请尝试使用：nth Tester站点作为一个有用的工具，它可以帮助您定义语法以实现您想要的外观。使用下拉菜单选择nth-of-type（您也可以在这里尝试其他伪类，例如nth-child）。
