如何使用 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 解析並且工作正常。