html - TD 内容上的 CSS 选择器

Question

我有一张表，其 TD 包含普通文本。有没有办法根据 TD 的内容在 TD 上设置样式（例如设置背景颜色）？例如，我可能希望 GO 有绿色背景，而 RED 应该有红色背景。

我试过这些但没有成功：

td[innerText='GO']
td[innerHtml='GO']
td[outerText='GO']

当然，我可以根据其内容为每个 TD 设置一个类或显式样式，但我宁愿避免这种情况。

Answer 1

您必须使用 javascript 检查内容，然后更改td标签的样式。

您可能在文件中有一个函数script.js：

function tdStyle(current_table) {

    var tds = current_table.getElementsByTagName("td");

    for (i = 0; i < tds.length; i++) {

        if (tds[i].textContent == "string1" || tds[i].innerText == "string1") {
            tds[i].style.backgroundColor = "green";
        } else if (td_tag.textContent == "string2" || tds[i].innerHTML == "string2") {
            tds[i].style.backgroundColor = "red";
        } else if (td_tag.textContent == "string3" || tds[i].innerHTML == "string3") {
            tds[i].style.backgroundColor = "blue";
        }

    }

}

然后你在你的table标签中使用这个函数，比如：

<table onload="tdStyle(this);">
<tr><td>...</td></tr>
<tr><td>...</td></tr>
<tr><td>...</td></tr>
...
</table>

请注意，比较是用tds[i].textContent和进行tds[i].innerText的，因为后者是 IE 所必需的。