HTML表格背景CSS疑难：如何单独设置右上角单元格背景色

我正在为HTML表格编写CSS以设置单元格背景色，需求如下：

• 将表格首行和左列设为红色
• 将最右列设为蓝色

目前前两个效果已实现，但右上角的单元格因首行CSS规则仍显示红色，需要在不影响首行其他单元格的前提下，将该单元格改为蓝色。

以下是当前使用的CSS代码：

/* changes table's first row and column background colors */
.custom-table tr:first-child td{
    background-color: #9e172d !important;
}
.custom-table td:first-child{
    background-color: #9e172d !important;
}

.custom-table td:nth-child(4) {
  background-color: #3870e2 !important;
}

核心是通过更具体的CSS选择器覆盖原有规则，由于你使用了!important，新规则也需要添加!important确保优先级足够。

方法1：固定列数场景 #

如果表格列数固定为4列，直接给首行第4列单元格添加更精准的选择器：

/* 首行和左列设为红色 */
.custom-table tr:first-child td{
    background-color: #9e172d !important;
}
.custom-table td:first-child{
    background-color: #9e172d !important;
}

/* 最右列设为蓝色 */
.custom-table td:nth-child(4) {
  background-color: #3870e2 !important;
}

/* 首行最后一列设为蓝色，覆盖首行红色规则 */
.custom-table tr:first-child td:nth-child(4) {
  background-color: #3870e2 !important;
}

方法2：列数不固定场景 #

如果表格列数可能变化，用:last-child代替固定的nth-child(4)，自动匹配最后一列：

/* 首行和左列设为红色 */
.custom-table tr:first-child td{
    background-color: #9e172d !important;
}
.custom-table td:first-child{
    background-color: #9e172d !important;
}

/* 最右列设为蓝色 */
.custom-table td:last-child {
  background-color: #3870e2 !important;
}

/* 首行最后一列设为蓝色，覆盖首行红色规则 */
.custom-table tr:first-child td:last-child {
  background-color: #3870e2 !important;
}

选择器tr:first-child td:last-child（或tr:first-child td:nth-child(4)）的优先级高于单独的tr:first-child td，会优先生效，仅修改首行最后一列的背景色，不会影响首行其他单元格或其他行的最后一列。

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