如何用CSS nth-of-type实现多表格跨行整体行色交替（无需JS、不改HTML）

嘿，这个需求确实有点绕，但不用JavaScript、不改HTML的前提下，咱们还是有办法搞定的！下面给你两种方案，你可以根据自己的浏览器兼容需求来选：

方案一：基于表格序号的行色反转（简单但有局限性） #

这个方案的思路是：让奇数位置的表格（第1、3、5…个）和偶数位置的表格（第2、4、6…个）分别采用相反的行色规则，以此实现跨行的视觉延续。

代码示例：

/* 基础表格样式 */
table {
  border-collapse: collapse;
  border: 1px solid #ddd;
  width: 100%;
  margin: 1rem 0;
}
th, td {
  padding: 0.75rem;
  border: 1px solid #ddd;
}

/* 奇数序号表格：奇数行灰色，偶数行白色 */
table:nth-of-type(odd) tr:nth-of-type(odd) {
  background-color: #f5f5f5;
}
table:nth-of-type(odd) tr:nth-of-type(even) {
  background-color: white;
}

/* 偶数序号表格：奇数行白色，偶数行灰色 */
table:nth-of-type(even) tr:nth-of-type(odd) {
  background-color: white;
}
table:nth-of-type(even) tr:nth-of-type(even) {
  background-color: #f5f5f5;
}

⚠️ 局限性：这个方案只有当每个表格的行数是奇数时，才能完美实现跨行交替。如果某个表格的行数是偶数，下一个表格的第一行颜色会和上一个表格的最后一行颜色重复，不符合需求。

方案二：用:has()选择器实现精准跨行交替（更准确，需考虑浏览器兼容） #

如果你的目标浏览器支持CSS :has()选择器（目前Chrome、Firefox 121+、Edge都支持，IE不支持），那可以用这个方案，它能完美适配任意行数的表格，精准延续上一个表格的最后一行颜色。

思路是：通过:has()判断前一个表格的最后一行是奇数行还是偶数行，然后动态调整当前表格的行色规则。

代码示例：

/* 基础表格样式 */
table {
  border-collapse: collapse;
  border: 1px solid #ddd;
  width: 100%;
  margin: 1rem 0;
}
th, td {
  padding: 0.75rem;
  border: 1px solid #ddd;
}

/* 第一个表格的默认行色规则 */
table:first-of-type tr:nth-of-type(odd) {
  background-color: #f5f5f5;
}
table:first-of-type tr:nth-of-type(even) {
  background-color: white;
}

/* 如果前一个表格的最后一行是奇数行（即表格行数为奇数），当前表格反转行色 */
table:has(tr:last-of-type:nth-of-type(odd)) + table tr:nth-of-type(odd) {
  background-color: white;
}
table:has(tr:last-of-type:nth-of-type(odd)) + table tr:nth-of-type(even) {
  background-color: #f5f5f5;
}

/* 如果前一个表格的最后一行是偶数行（即表格行数为偶数），当前表格沿用第一个表格的行色规则 */
table:has(tr:last-of-type:nth-of-type(even)) + table tr:nth-of-type(odd) {
  background-color: #f5f5f5;
}
table:has(tr:last-of-type:nth-of-type(even)) + table tr:nth-of-type(even) {
  background-color: white;
}

这个方案不管每个表格有多少行，都能保证下一个表格的第一行颜色和上一个表格的最后一行颜色相反，完美实现跨行整体交替。

内容的提问来源于stack exchange，提问作者Mikey