本文详解为何 元素上的 style="background-color:red" 无法生效，并提供三种基于 CSS 选择器的专业解决方案，通过 :nth-last-child() 精准定位列，兼顾语义性、可维护性与浏览器兼容性。
本文详解为何 `
在 HTML 表格中，试图通过
因此，正确的做法是放弃依赖
/* 推荐方案：为最后两列（周六、周日）统一设红色背景 */
table th:nth-last-child(-n+2),
table td:nth-last-child(-n+2) {
background-color: #ff4757; /* 鲜红，增强可读性 */
}该选择器中 -n+2 表示“从最后一个开始，匹配第1个和第2个”，即自动适配任意行数，无需硬编码列索引。配合你原有的全局样式（如 * { background-color: black; color: white; }），只需确保该规则在外部 CSS 中置于通用 th, td 规则之后，以保证特异性足够覆盖。
以下是完整、可直接运行的实践示例：
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>周历表格 - 周六周日高亮</title>
<style>
* {
background-color: black;
color: white;
margin: 0;
padding: 0;
}
table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
}
th, td {
border: 2px solid white;
padding: 0.5rem 0.75rem;
text-align: center;
background-color: black;
}
/* ✅ 关键：为最后两列设置红色背景 */
th:nth-last-child(-n+2),
td:nth-last-child(-n+2) {
background-color: #ff4757;
}
/* ✅ 可选：悬停时保持周末列颜色不变（避免被覆盖） */
tr:hover td:not(:nth-last-child(-n+2)) {
background-color: #2ed573; /* 工作日悬停为绿色 */
}
tr:hover th:nth-last-child(-n+2),
tr:hover td:nth-last-child(-n+2) {
background-color: #ff6b6b; /* 周末悬停为稍浅红 */
}
</style>
</head>
<body>
<table>
<tr>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
<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>
</table>
</body>
</html>注意事项与最佳实践：
- ✅ 避免
背景色陷阱： 仅支持 width、visibility 和 border（部分浏览器），background-color 永远无效； - ✅ 优先使用语义化选择器：nth-last-child() 比 nth-child(6), nth-child(7) 更健壮，列数变化时无需修改 CSS；
- ⚠️ 注意层级覆盖：若存在 tr:hover td 等悬停规则，需额外为周末列编写悬停变体（如示例中 :not(:nth-last-child(-n+2))），否则悬停会覆盖红色背景；
- ? 兼容性提示：:nth-last-child() 支持所有现代浏览器（Chrome 4+, Firefox 3.5+, Safari 3.2+），IE9+ 亦支持，无兼容风险。
综上，解决表格列背景色问题的核心逻辑是：样式必须施加于渲染节点。抛弃对
