如何在CSS/SCSS中根据td元素内容值实现条件格式化？

核心问题 #

SCSS是编译时预处理器，它在编译成普通CSS的阶段无法获取HTML中td元素的实际内容值，所以你用@if判断内容值的写法从原理上就行不通——预处理器没法读取运行时的DOM内容。

可行解决方案 #

方案1：JavaScript动态添加类（最可靠，兼容性好） #

通过JS遍历所有td元素，判断内容数值是否小于500，给符合条件的td添加自定义类，再用SCSS编写对应样式。

JS代码：

document.querySelectorAll('td').forEach(td => {
  const num = parseInt(td.textContent.trim(), 10);
  // 排除非数字内容的情况
  if (!isNaN(num) && num < 500) {
    td.classList.add('low-value');
  }
});

SCSS代码：

td {
  color: black; // 默认黑色

  &.low-value {
    color: red; // 数值小于500时显示红色
  }
}

方案2：HTML自定义属性+现代CSS（无需JS，依赖浏览器兼容性） #

给td添加data-value属性存储数值，结合CSS变量和颜色计算逻辑实现条件样式（仅支持现代浏览器）。

HTML写法：

<td data-value="439" style="--value: 439">439</td>
<td data-value="578" style="--value: 578">578</td>

SCSS代码：

td {
  color: black;
  &[data-value] {
    // 利用HSL颜色特性：数值小于500时饱和度为100%（红色），否则饱和度为0（黑色）
    color: hsl(
      0,
      calc( (var(--value) < 500) * 100% ),
      50%
    );
  }
}

方案3：HTML自定义属性+CSS属性选择器（无JS，写法繁琐） #

如果不想用JS和CSS变量，可以通过属性选择器匹配数值范围，但仅适合固定位数的数值，写法较为繁琐：

SCSS代码：

td {
  color: black;
  // 匹配0-499的数值
  &[data-value="0"],
  &[data-value^="1"],
  &[data-value^="2"],
  &[data-value^="3"],
  &[data-value^="4"]:not([data-value^="4"][data-value$="00"]):not([data-value^="4"][data-value$="01"]) {
    // 需补全400-499的匹配规则，整体效率较低
    color: red;
  }
}

总结 #

优先推荐方案1，它兼容性最好、逻辑清晰，无论数值位数和浏览器版本都能准确生效。SCSS本身无法实现运行时的内容值判断，必须结合JS或HTML属性配合CSS完成需求。

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