基于内容的CSS规则

Question

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

Answer 1

没有。 :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';

Answer 2

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

Answer 3

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

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

在本页here

中提及约1/2

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

Answer 4

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

Answer 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的内容为“关闭”，则TR的背景颜色将以浅红色标识。