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