如何简化表格样式中重复元素与伪类组合的冗余CSS代码？

针对你目前的重复代码，可以通过以下几种方式简化：

方案1：原生CSS选择器分组（无额外依赖） #

相同样式的选择器可以用逗号拼接，只需要写一次样式规则，合并后代码如下：

/*  默认绿色背景  */
.tr1 th:nth-child(1),
.tr1 th:nth-child(5),
.tr2 td:nth-child(2),
.tr2 td:nth-child(4),
.tr3 td:nth-child(3),
.tr4 td:nth-child(2),
.tr4 td:nth-child(4) {
  background-color: green;
}

/* hover状态 */
.tr1 th:nth-child(1):hover,
.tr1 th:nth-child(5):hover,
.tr2 td:nth-child(2):hover,
.tr2 td:nth-child(4):hover,
.tr3 td:nth-child(3):hover,
.tr4 td:nth-child(2):hover,
.tr4 td:nth-child(4):hover {
  background-color: hotpink;
}

/* 选中样式 */
.tr1 th:nth-child(1)::selection,
.tr1 th:nth-child(5)::selection,
.tr2 td:nth-child(2)::selection,
.tr2 td:nth-child(4)::selection,
.tr3 td:nth-child(3)::selection,
.tr4 td:nth-child(2)::selection,
.tr4 td:nth-child(4)::selection {
  color: hotpink;
}

对比原代码直接减少了2/3的冗余量，后续调整对应样式只需要修改一处即可。

方案2：新增通用类名（维护成本最低） #

如果可以修改HTML结构，最简便的方式是给所有需要应用这套样式的th、td单元格添加统一类名，比如special-cell，CSS代码可以简化到只有3段：

.special-cell {
  background-color: green;
}
.special-cell:hover {
  background-color: hotpink;
}
.special-cell::selection {
  color: hotpink;
}

后续需要新增符合规则的单元格，只要给元素加special-cell类即可，不需要修改CSS代码。

方案3：CSS预处理器批量生成（适合有Sass/Less环境的项目） #

如果项目已经使用CSS预处理器，可以通过变量+循环的方式批量生成规则，后续调整单元格匹配规则只需要修改配置列表即可，Sass示例如下：

// 配置需要匹配的单元格规则
$cell-list: (
  (".tr1", "th", 1),
  (".tr1", "th", 5),
  (".tr2", "td", 2),
  (".tr2", "td", 4),
  (".tr3", "td", 3),
  (".tr4", "td", 2),
  (".tr4", "td", 4),
);

// 生成默认样式
@each $tr, $el, $n in $cell-list {
  #{$tr} #{$el}:nth-child(#{$n}) {
    background-color: green;
    &:hover {
      background-color: hotpink;
    }
    &::selection {
      color: hotpink;
    }
  }
}

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