如何使用 css 根据文本值更改文本颜色？

Question

我有显示足球队统计数据的表格数据。

有一列有如下字母：

1. “W”（赢）
2. “L”（输）
3. “D”（平局）

那是字母被呈现为一个单独的列，事情是这个值是动态的，我需要应用不同的 colors：

1. 如果使用“W”，则该文本应为绿色
2. 在“L”颜色红色的情况下
3. 在“D”颜色灰色的情况下

有没有办法通过 CSS 做到这一点？

.table td:nth-child(3) {
  if letter is === W apply green color?
}

<td>
  "W"
</td>     
<td>
  "L"
</td>  
<td>
  "D"
</td> 

Answer 1

如果您可以将这些字母作为属性传递给 td 元素，您可以在 CSS 中执行此操作，如下所示：

 <td color_code='Your letter'>Your letter</td>

这里的“你的信”是动态生成的信。 现在，只需在 CSS 中，只需在调用 td 元素时指定该属性：

td[color_code='L']{ color: red}

与字母的 rest 相同。

Answer 2

如果可以添加属性，则可以针对不同样式规则的 CSS 中的属性。 例子

 <td data-result-val="W">W</td>
 <td data-result-val="L">L</td>
 <td data-result-val="D">D</td>

在 css

 td[data-result-val="L"] { color: red;}
 td[data-result-val="W"] { color: green;}
 td[data-result-val="D"] { color: grey;}

Answer 3

已经不可能了。 包含伪 class 可以做到这一点，但这已被弃用并且不再起作用。

你可以做什么：

最佳解决方案：

渲染页面时，可以在td处渲染一个class：<td class="color-W">W></td>。

不太好：

或者您可以使用 javascript 或 jQuery 设置渲染后的类。

JQuery：

$('td:contains("W")').addClass('color-W');

PS：jQuery：包含伪 class 选择器由 jQuery 解析并且工作正常。