基于内容的 CSS 规则

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/1777357/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 21:18:18  来源:igfitidea点击:

CSS rule based on content

css

提问by Tamás Szelei

I would like to apply a different style to all anchors containing a specific word. Can it be done in pure CSS? It's ok if it's CSS3-only.

我想对包含特定单词的所有锚点应用不同的样式。可以在纯 CSS 中完成吗?如果它是 CSS3-only 就可以了。

采纳答案by bobince

No. :containswas once proposed but is not in the current Working Draft of CSS3 Selectors.

No.:contains曾经被提出过,但不在当前的 CSS3 选择器工作草案中。

You would need some JavaScript, for example:

您需要一些 JavaScript,例如:

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

回答by Divya Manian

You can match attribute values though. If you use custom data attributes, it might get what you want.

您可以匹配属性值。如果您使用自定义数据属性,它可能会得到您想要的。

回答by Scott Evernden

yes there is a :containsselector in CSS3.

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

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

it is mentioned about 1/2 down this page here

在此页面下方大约 1/2 处提到了此处

This is something you can also do with jQuerytoo ...

这也是你也可以用 jQuery 做的事情......

回答by lynx_74

@bobince help me and I wrote this code:

@bobince 帮助我,我写了这段代码:

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

If the content of some TD is 'closed' then the background color of the TR will be identified with light red color.

如果某个 TD 的内容是“关闭的”,那么 TR 的背景颜色将被标识为浅红色。

回答by Enes

Use the Hitchwhich is a tiny JS library. You can easily apply content based style to any element. It has lots of options and great for conditional styling.

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