CSS不同类下表格th、td样式跨类覆盖问题排查求助

你编写的CSS选择器存在语法逻辑错误：逗号用于分隔完全独立的两个选择器，你代码中.characteristics th, td等价于两条独立规则：

• .characteristics th：仅作用于characteristics类下的th元素
• td：无父类限制，作用于页面全局所有td元素

同理后续的.characteristics th:last-of-type, td:last-of-type、.movement th, td规则中的td选择器都属于全局规则。CSS加载遵循「同优先级下后定义的规则覆盖先定义规则」的逻辑，你放在后面的movement段全局td样式自然覆盖了前面characteristics段的全局td样式，才会出现跨类覆盖的异常。

将所有逗号后的td选择器补充对应的父类前缀，将样式作用范围限制在对应类的区块内即可，修正后的CSS片段如下：

.characteristics th,
.characteristics td {
  padding: 2px;
  text-align: center;
  font-size: 10pt;
}

.characteristics th:last-of-type,
.characteristics td:last-of-type {
  text-align: left;
}

.characteristics tr:last-of-type {
  font-weight: bold;
}

div.movement {
  grid-row: 4;
  grid-column: 2;
}

.movement th,
.movement td {
  margin: 0px;
  padding: 0px 2px;
  text-align: left;
  font-size: 8pt;
}

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