如何仅用CSS根据HTML标签内容设置样式？适配ngFor生成表格场景

结论 #

仅依靠原生CSS没有通用方案可以直接根据单元格的文本内容调整样式，CSS选择器本身不支持直接匹配DOM元素的内部文本，此前CSS2草案中出现过的:contains()文本匹配选择器最终也被官方移除，主流浏览器均不支持该特性。

可落地的替代方案 #

方案1：添加自定义数据属性配合CSS属性选择器（改动最小，最接近纯CSS需求） #

你只需要调整少量Angular模板代码，给单元格绑定存储内容的自定义属性，后续所有样式匹配都可以完全用CSS实现：

1. 调整模板代码，给td添加data-content属性：

<tr *ngFor = "let row of food;">
        <td *ngFor ="let col of headers;" [attr.data-content]="row[col]">
            {{row[col]}}
        </td>
</tr>

2. 用CSS属性选择器匹配第二列的内容，按需设置样式：

/* 精确匹配第二列内容为“蔬菜”的单元格 */
table tr td:nth-child(2)[data-content="蔬菜"] {
  background-color: green;
}
/* 模糊匹配第二列内容包含“肉”的单元格 */
table tr td:nth-child(2)[data-content*="肉"] {
  background-color: red;
}

如果第二列的可选内容是固定的枚举值，这个方案可以完美覆盖需求。

方案2：使用Angular类绑定（逻辑更灵活） #

如果内容匹配规则比较复杂（比如数值区间判断、多条件组合判断），推荐直接用ngClass绑定样式类，不需要修改CSS匹配逻辑：

<tr *ngFor = "let row of food;">
        <td *ngFor ="let col of headers; let colIndex = index" 
            [ngClass]="{
              'high-calorie': colIndex === 1 && row[col] > 300,
              'low-calorie': colIndex === 1 && row[col] <= 100
            }">
            {{row[col]}}
        </td>
</tr>

再编写对应样式类的CSS规则即可。

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