求助：HTML表格表头单元格自定义背景色不生效问题

你的代码里有两个核心问题导致class样式失效：

1. CSS语法错误
   你把.name选择器嵌套在了table, th, td的规则内部，标准原生CSS不支持这种嵌套写法（只有Sass/Less等预处理器支持），所以这个样式根本不会被浏览器解析。

2. 样式优先级冲突
   你给table, th, td统一设置了background-color: pink，同时thead th设置了yellow，这两个选择器的优先级会和你写的class样式冲突，导致class样式被覆盖。

修正后的CSS代码 #

table {
  font-family: sans-serif;
}

thead th {
  text-align: center;
  font-weight: bold;
  font-size: 30px;
  background-color: yellow; /* 表头默认色，可被class覆盖 */
}

table, th, td {
  padding: 30px;
  border: 1px solid black;
  border-collapse: collapse;
  width: 700px;
}

/* 单独给单元格设置背景色，避免干扰表头 */
td {
  background-color: pink;
}

/* 用高优先级选择器定义每个表头的独立背景色 */
thead th.tag {
  background-color: orange;
}
thead th.name {
  background-color: lightgreen;
}
thead th.description {
  background-color: lightblue;
}

修正说明 #

• 把嵌套的class选择器移出，改成独立的规则块，符合原生CSS语法要求。
• 将pink背景色从共用规则中拆分，只应用在td上，减少不必要的优先级冲突。
• 使用thead th.class的选择器写法，优先级高于单独的th或thead th，确保class样式能成功覆盖默认样式。

你的HTML代码无需修改，保持原有的class设置即可，现在三个表头会分别显示不同的背景色。

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