基于内容的 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
CSS rule based on content
提问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. :contains
was 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 :contains
selector 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 的背景颜色将被标识为浅红色。