不使用:nth-child()选择器，如何用PHP while循环+CSS自定义表格背景色

<!DOCTYPE html>
<html>
<head>
    <title>12×12乘法表</title>
    <style>
    table {
        width: 100%;
        height: 400px;
        font-family: arial, sans-serif;
        border-collapse: collapse;
        text-align: center;
    }
    /* 普通单元格样式 */
    td {
        background-color: #FF8A65;
        border: 1px solid #333;
    }
    /* 首行、首列表头样式，无需使用:nth-child */
    th {
        background-color: #FFCC80;
        border: 1px solid #333;
        font-weight: bold;
    }
    /* 对角线单元格样式，通过自定义类匹配，无需使用:nth-child */
    .diagonal {
        background-color: #A5D6A7;
    }
    </style>
</head>
<body>
<?php
$x = 1; // 行计数
echo "<table>\n";
while ($x <= 12) {
    echo "\t<tr>\n";
    $y = 1; // 列计数
    while ($y <= 12) {
        $content = "{$x} × {$y} = " . $x*$y;
        // 判断是否为表头（首行/首列），输出th标签
        if ($x == 1 || $y == 1) {
            $class = $x == $y ? ' class="diagonal"' : '';
            echo "\t\t<th{$class}>{$content}</th>\n";
        } else {
            // 判断是否为对角线单元格，添加对应类
            $class = $x == $y ? ' class="diagonal"' : '';
            echo "\t\t<td{$class}>{$content}</td>\n";
        }
        $y++;
    }
    echo "\t</tr>\n";
    $x++;
}
echo "</table>";
?>
</body>
</html>

实现说明 #

• 修复了原代码中重复声明<table>、存在多余无效闭合标签的问题，避免DOM结构渲染异常
• 循环内新增条件判断逻辑：
  • 当行计数$x=1（首行）或列计数$y=1（首列）时输出<th>标签，CSS直接通过th标签选择器设置表头样式
  • 当行计数等于列计数（$x==$y）时，给单元格添加自定义类diagonal，CSS通过类选择器设置对角线样式
• 所有样式匹配规则均未使用:nth-child()选择器，符合使用要求

内容的提问来源于stack exchange，提问作者Chan Jia Xiang