CSS选择器疑问：如何覆写.table-layout表格内指定TD的样式？

核心问题：选择器语法错误 #

你写的.table-layout td .override-style里的空格是后代选择器，意思是找.table-layout下的td内部、带有.override-style类的子元素，而不是给带这个类的td本身设置样式。

正确的写法是.table-layout td.override-style（注意td和.override-style之间没有空格），这表示选中.table-layout下同时带有override-style类的td元素。

确保样式优先级足够 #

如果上面的选择器还是不生效，检查优先级计算：

• 基础选择器.table-layout td的优先级：类(10) + 元素(1) = 11
• 覆写选择器.table-layout td.override-style的优先级：类(10) + 元素(1) + 类(10) = 21，优先级更高，理论上能覆盖基础样式。
• 若仍无效，可能是其他样式用了!important，这时候要么在覆写样式里加!important（不推荐滥用），要么进一步提升选择器优先级，比如写成.table-layout tr td.override-style。

示例代码 #

/* 全局表格td样式 */
.table-layout td {
  padding: 8px;
  border: 1px solid #ccc;
  color: #333;
}

/* 覆写指定td的样式 */
.table-layout td.override-style {
  color: #ff0000;
  background-color: #fff3f3;
}

<table class="table-layout">
  <tr>
    <td>普通单元格</td>
    <td class="override-style">需要覆写样式的单元格</td>
  </tr>
</table>

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