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来完成它。你可以阅读一个很好的blog post。

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>

由于a代码

上的value属性不是有效的HTML，因此不太有用

如果可能，请在a标记上打一个班级。因为这很可能是不可能的（因为你已经完成了），你可以使用jQuery在该标签上添加一个类。尝试这样的事情：

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

然后使用.anchortwo作为您的班级选择器。

Answer 4

您可以使用css nth-child属性访问任何元素并进行任何更改。我在一个网站上使用它，根据屏幕宽度制作一个更小或更大的标识。

Answer 5

使用pup（一种使用CSS选择器处理HTML的命令行工具），您可以使用a:contains("innerHTML1")。

例如：

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

Answer 6

<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>

Answer 7

使用nth-child选择器非常简单。

<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

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

7 个答案: