如何避免表格指定列的条件CSS作用于表头并让表头样式优先级更高

方案1：修改JS逻辑，从根源避免表头加类（推荐） #

你的循环逻辑默认对所有行（包括i=0的表头行）都执行了颜色类判断，表头文本属于非数值，所以被自动加上了neutral类。只需在加类逻辑前新增跳过表头的判断即可，修改后的核心代码如下：

for (let i = 0; i < array1.length; i++) {
    // ... 原有创建单元格、赋值文本的逻辑不变
    col3.appendChild(col3_text);
    
    // 新增判断：跳过表头行（i=0）不设置颜色类
    if (i > 0) {
        resultcomp = result[i].replace(/\$/g, '');
        if(resultcomp < 0 && !isNaN(resultcomp)){
            col3.setAttribute("class", "negative");
        }
        else if(resultcomp > 0 && !isNaN(resultcomp)){
            col3.setAttribute("class", "positive");
        }
        else {
            col3.setAttribute("class", "neutral");
        }
    }

    row.appendChild(col1);
    row.appendChild(col2)
    row.appendChild(col3)
}

方案2：不修改JS，用高优先级CSS覆盖表头样式 #

你之前写的行级样式不生效，是因为tr上设置的color属于继承属性，优先级远低于td元素上直接绑定的.neutral类样式。你可以直接选中第一行的第三列单元格，样式优先级会高于普通类：

/* 选中表格第一行的最后一个单元格（也就是结果列表头） */
#myTable tr:first-child td:last-child {
    color: white !important;
    font-weight: 500;
}

如果需要单独给表头设置其他样式，都可以写在这个选择器下。

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