按文本显示css目标图标[重复]

这是不可能使用CSS的。但是,您可以使用jQuery来完成。有一个很好的 blog post 在上面你可以阅读。

更新工作代码。jsiddle链接如下:

每个@whamiscore的初始HTML:

<a href="example1.com"> innerHTML1 </a>
<a href="example2.com"> innerHTML2 </a>
<a href="example3.com"> innerHTML3 </a>

var myEles = document.getElementsByTagName('a');
for(var i=0; i<myEles.length; i++){
    if(myEles[i].innerHTML == ' innerHTML2 '){
         console.log('gotcha'); 

         //use javascript to style
         myEles[i].setAttribute('class', "gotcha");
    }
}

样式的CSS:

/* make this look a bit more visible */
a{
  display: block;
}

.gotcha{
  color: red;
}

https://jsfiddle.net/kjy112/81qqxj23/

使用CSS你无法检测锚定标签的内容。

[value=] 将引用标记上的属性

<a href="" value="blah"> innerHTML2 </a>

a 标签

如果可能的话,给它上一节课

   <script type="text/javascript">
        $(function(){ $('a:contains(innerHTML2)').addClass('anchortwo'); });
    </script>

然后使用 .anchortwo 作为你的类选择器。

使用 pup a:contains("innerHTML1")

例如:

$ echo '<a href="example1.com"> innerHTML1 </a>' | pup 'a:contains("innerHTML1")' text{}
 innerHTML1 

<style>
a[data-content]::before {
  content: attr(data-content);
}
a[data-content="innerHTML2"] {
  color: green;
}
</style>
<a href="example1.com" data-content="innerHTML1">&nbsp;</a>
<a href="example2.com" data-content="innerHTML2">&nbsp;</a>
<a href="example3.com" data-content="innerHTML3">&nbsp;</a>

<style>
a:nth-child(2) {
  color: green;
}
</style>
<a href="example1.com"> innerHTML1 </a>
<a href="example2.com"> innerHTML2 </a>
<a href="example3.com"> innerHTML3 </a>

编辑:这是我在网上找到的消息来源。检查这里的浏览器兼容性。 资料来源: http://reference.sitepoint.com/css/pseudoclass-nthchild