元素的 style 属性无法直接控制单元格背景色，因其不继承样式且不渲染内容；应改用 CSS 的 :nth-last-child() 选择器精准定位列并应用样式。
`
在 HTML 表格中，许多开发者尝试通过
要真正实现“周六、周日列统一显示红色背景”，推荐使用语义清晰、兼容性好且可维护性强的纯 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>✅ 优势说明：
立即学习“前端免费学习笔记（深入）”；
-
精准可控：: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() 系列选择器，是实现灵活、健壮表格样式的必备技能。 - 样式分离：完全脱离 HTML 结构，无需修改
