一尘不染

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

html

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

我想基于内部HTML使用CSS选择器设置仅第二个样式(innerHTML2)。这可能吗?我试过使用,a[value=innerHTML2]但似乎不起作用。


阅读 429

收藏
2020-05-10

共2个答案

一尘不染

使用CSS不可能做到这一点。但是,您可以使用jQuery。

2020-05-10
一尘不染

目前,并非所有使用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;
}
2020-05-18