如何CSS:选择基于内部HTML的元素

Question

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

我想基于内部HTML使用CSS选择器设置第二个(innerHTML2)样式.这可能吗？我尝试过使用a[value=innerHTML2]它似乎没有用.

Answer 1

使用CSS无法做到这一点.但是,您可以使用jQuery来完成它.你可以阅读一篇很好的博客文章.

Answer 2

目前所有具有css的浏览器都不可能,但是使用javascript你可以做到这一点

更新了工作代码.JSFiddle链接如下:

@whamsicore的初始HTML:

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

JavaScript的:

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/

Answer 3

使用CSS,您无法检测锚标记的内容.

[value=] 会引用标签上的属性

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

由于value属性在a标记上不是有效的HTML,因此不是很有用

如果可能的话,在该a标签上打一个班级.因为这很可能是不可能的(因为你已经完成了),你可以使用jQuery在该标签上添加一个类.尝试这样的事情:

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

然后.anchortwo用作您的类选择器.