基于内容的CSS规则[重复]

Posted 2023-03-06

【中文标题】基于内容的CSS规则[重复]

【英文标题】：CSS rule based on content [duplicate]

【发布时间】：2010-12-19 03:22:09

【问题描述】：

我想对包含特定单词的所有锚点应用不同的样式。可以用纯 CSS 完成吗？如果它是纯 CSS3 也没关系。

【参考方案1】：

是的，CSS3 中有一个:contains 选择器。

li:contains("special")text-style: italic;

在本页下方约 1/2 处提及here

这也是something you can also do with jQuery ...

【讨论】：

有趣，但仅适用于静态媒体“此选择器仅适用于静态媒体（即打印而非屏幕显示）。”

啊，是的，我没有注意到这种细微差别.. 我明白为什么它是有道理的（也许）。感谢您发现这一点

:contains 选择器没有进入后来的规范。

有效，我不相信！谢谢！

不适用于 Chrome。

【参考方案2】：

没有。 :contains 曾被提出，但不在当前的 CSS3 选择器工作草案中。

你需要一些 javascript，例如：

for (var i= document.links.length; i-->0;)
    if (/\bSpecificWord\b/i.test(document.links[i].innerhtml)
        document.links[i].style.color= 'red';

【讨论】：

我真的希望他们现在已经解决了这个问题。很明显，通过其内容中的文字为元素设置样式是一个极其常见的问题。

【参考方案3】：

您可以match attribute values though。如果您使用自定义数据属性，它可能会得到您想要的。

【讨论】：

这个答案在 chrome 中工作得很好。 td[data-carrier="Verizon"] color: #F00; 生成td 单元格，其data-carrier 属性值为Verizon，颜色为Red。

这与为每个内容值创建单独的 CSS 类名称相同，例如。 '.carrier-verizon color:red'

【参考方案4】：

使用Hitch，这是一个小型 JS 库。您可以轻松地将基于内容的样式应用于任何元素。它有很多选项，非常适合条件样式。

【讨论】：

Hitch 是死链接，它移动了吗？

【参考方案5】：

@bobince 帮帮我，我写了这段代码：

var x = document.getElementsByTagName('TD');
for (var i= x.length; i-->0;)
    if (x[i].innerHTML=='closed')
        x[i].parentNode.style.background= '#FEE';

如果某些TD的内容是'close'，那么TR的背景颜色会被标识为浅红色。

【讨论】：

我不认为通过括号符号访问 nodeList 是标准的。