如何仅用CSS根据表头类为同列tbody单元格应用对应样式？

可以仅通过CSS实现该需求，不需要为每个单元格单独加类，也不需要引入jQuery，最常用的兼容方案如下：

实现代码 #

你只需要在原有CSS基础上新增一行选择器即可，不需要修改任何现有HTML结构：

table {
  width:300px;
  border-collapse:collapse;
}
/* 同时匹配表头price列和对应内容列 */
th.price, tbody td:nth-child(2)
{
  text-align:right;
  background:yellow;
}
th, td
{
  border:1px solid #aaa;
}

如果你的需求是完全禁用:nth-child相关选择器，目前全兼容的实现需要对HTML做极小修改，无需改动任何td元素：

1. 在<table>标签下新增<colgroup>标注价格列：

<table>
  <colgroup>
    <col>
    <col class="price-col">
  </colgroup>
  <!-- 原有thead、tbody代码保持不变 -->
  <thead><tr><th>Item</th><th class="price">Price</th></tr></thead>
  <tbody>
    <tr><td>Item1</td><td>12.30</td></tr>
    <tr><td>Item2</td><td>23.40</td></tr>
    <tr><td>Item2</td><td>45.60</td></tr>
  </tbody>
</table>

2. 对应CSS调整为：

/* 匹配所有价格列单元格 */
th.price, .price-col + td, td:has(~ .price-col) {
  text-align: right;
}
th.price {
  background:yellow;
}

该方案后续如果调整价格列的位置，只需要移动<col class="price-col">的顺序即可，不需要修改任何样式或者单元格属性。

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