HTML表格CSS样式不生效求助：hover与striped效果失效

看起来你的表格样式失效是DOM结构不合法导致的，核心问题出在JavaScript生成表格的逻辑上，同时CSS选择器也需要调整来适配正确的结构。

问题根源 #

1. 重复创建<thead>和<tbody>：你的循环里每次都向表格追加完整的<thead>和<tbody>标签，这违反了HTML规范——一个<table>只能有一个<thead>和一个<tbody>（除非是分段表格）。浏览器解析这种错误结构时，会自动修正但导致行的层级混乱，CSS选择器无法正确匹配目标行。
2. 选择器混用（次要）：你初始化表头时用$("#statTable")，但追加单元格和闭合行时用$(".statTable")，虽然这里类名和ID同名不会报错，但逻辑上不够严谨。
3. CSS选择器范围太广：原CSS里的#statTable tr:nth-child(even)会把<thead>里的表头行也纳入计数，导致条纹效果混乱。

修复步骤 #

1. 重构JavaScript的表格生成逻辑

我们只创建一次<thead>和<tbody>，然后在循环中分别向它们添加表头行和数据行：

function fortniteSearch(data) { 
    const tableCells = [
        {category: "lifeTimeStats", stats: [8, 9, 10, 11, 7, 2, 4, 5]},
        {category: "stats", subcategory: "p2", stats: ["top1", "winRatio", "kills", "kd", "kpg", "matches", "top10", "top25"]},
        {category: "stats", subcategory: "p10", stats: ["top1", "winRatio", "kills", "kd", "kpg", "matches", "top5", "top12"]},
        {category: "stats", subcategory: "p9", stats: ["top1", "winRatio", "kills", "kd", "kpg", "matches", "top3", "top6"]}
    ]; 
    const gameModes = ["OVERALL:", "SOLO:", "DUO:", "SQUADS:"]; 

    if(data.error !== undefined) {
        alert("Player not found!");
        return;
    }

    $("#playerName").val(data.IGN);
    $("#playerIcon").attr("src", "/images/avatar_fortnite.png");
    $("#statDisplay").fadeIn(500);
    $("#statTable").empty();

    // 只创建一次thead和tbody
    const $thead = $("<thead></thead>");
    const $tbody = $("<tbody></tbody>");
    $("#statTable").append($thead).append($tbody);

    for(let i = 0; i < tableCells.length; i++) {
        // 向thead添加表头行
        $thead.append(`<tr><th align="center" colspan="8"><b><u>${gameModes[i]}</u></b></th></tr>`);
        
        // 创建数据行
        const $row = $("<tr></tr>");
        for(let j = 0; j < tableCells[i].stats.length; j++) {
            let toAppend;
            if(tableCells[i].subcategory === undefined) {
                toAppend = `<td><b>${data[tableCells[i].category][tableCells[i].stats[j]].key}:</b><br>${data[tableCells[i].category][tableCells[i].stats[j]].value}</td>`;
            } else {
                toAppend = `<td><b>${data[tableCells[i].category][tableCells[i].subcategory][tableCells[i].stats[j]].label}:</b><br>${data[tableCells[i].category][tableCells[i].subcategory][tableCells[i].stats[j]].value}</td>`;
            }
            $row.append(toAppend);
        }
        // 把数据行添加到tbody
        $tbody.append($row);
    }

    $("#gameSelect").css("display", "none");
}

2. 调整CSS选择器，只针对<tbody>里的行

这样可以避免表头行干扰条纹和hover效果：

#statTable {
    width: 95%;
    height: 10%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    text-align: center;
    border: 1px solid black;
    background-color: white;
}

#statTable th {
    background-color: green;
    color: white;
    text-align: center;
}

/* 只针对tbody里的偶数行 */
#statTable tbody tr:nth-child(even) {
    background: grey;
}

/* 只针对tbody里的行hover效果 */
#statTable tbody tr:hover td {
    background-color: red;
}

为什么这样修复有效 #

• 合法的表格结构让浏览器能正确解析行的层级，CSS选择器可以精准匹配目标元素；
• 把表头和数据行分别放到唯一的<thead>和<tbody>中，避免了计数混乱；
• 用jQuery对象缓存行元素，让DOM操作更高效，也避免了选择器混用的问题。

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