元素的 style 属性无法直接控制单元格背景色，因其不继承样式且不渲染内容；应改用 CSS 的 :nth-last-child() 选择器精准定位列并应用样式。

`

` 元素的 `style` 属性无法直接控制单元格背景色，因其不继承样式且不渲染内容；应改用 css 的 `:nth-last-child()` 选择器精准定位列并应用样式。

在 HTML 表格中，许多开发者尝试通过

和 的 style 属性（例如 style="background-color:red"）为整列设置背景色，但发现该样式未生效——即使内联样式通常具有高优先级。根本原因在于： 元素本身不渲染视觉内容，也不继承 background-color 等外观属性。CSS 规范明确指出， 仅用于定义列宽、对齐等“间接样式”，其 background-color、color 等声明会被浏览器忽略（参见 CSS2.1 §17.2.1）。因此，即使你写了 style="background-color:red"，它也不会传递给对应的 或 元素。

要真正实现“周六、周日列统一显示红色背景”，推荐使用语义清晰、兼容性好且可维护性强的纯 CSS 方案：利用 :nth-last-child() 伪类选择器定位最后两列（即第6、7列），并为

和 分别设置样式：

/* 推荐方案：为最后两列（Saturday & Sunday）设置红色背景 */
table.weekly-table th:nth-last-child(-n+2),
table.weekly-table td:nth-last-child(-n+2) {
  background-color: #ff4d4d;
}

完整示例代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>周历表格</title>
  <style>
    * {
      background-color: black;
      color: white;
    }
    table.weekly-table {
      width: 100%;
      border-collapse: collapse;
      margin: 1em 0;
    }
    table.weekly-table th,
    table.weekly-table td {
      border: 2px solid white;
      padding: 8px 12px;
      text-align: center;
    }
    /* 关键：为最后两列（周六、周日）设红色背景 */
    table.weekly-table th:nth-last-child(-n+2),
    table.weekly-table td:nth-last-child(-n+2) {
      background-color: #ff4d4d;
    }
    /* 悬停效果（仅作用于非周末列，避免覆盖红色） */
    table.weekly-table tr:hover td:not(:nth-last-child(-n+2)) {
      background-color: #2ecc71;
    }
  </style>
</head>
<body>
  <table class="weekly-table">
    <thead>
      <tr>
        <th>Monday</th>
        <th>Tuesday</th>
        <th>Wednesday</th>
        <th>Thursday</th>
        <th>Friday</th>
        <th>Saturday</th>
        <th>Sunday</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
      </tr>
      <tr>
        <td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

✅ 优势说明：

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

立即学习“前端免费学习笔记（深入）”；

• 精准可控：:nth-last-child(-n+2) 精确匹配倒数第1和第2个子元素（即 或 ），不受行数变化影响；
• 样式分离：完全脱离 HTML 结构，无需修改 ，符合现代前端最佳实践；
• 兼容性优秀：支持所有现代浏览器及 IE9+；
• 可扩展性强：如需突出其他列（如工作日），只需调整选择器（如 :nth-child(1 of :is(th, td)) 或配合类名）。

⚠️ 注意事项：

• 避免在 上设置 background-color、color、font-size 等无效样式；
• 若表格含 colspan 或动态生成列，需确保列序逻辑一致，否则 :nth-last-child() 可能误匹配；
• 如需响应式适配（如移动端隐藏周末列），建议结合 @media 查询 + display: none，而非依赖 控制。

总结：表格列样式应作用于实际渲染的单元格（

/ ），而非抽象的 。掌握 :nth-child() 系列选择器，是实现灵活、健壮表格样式的必备技能。