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

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

我想使用基于内部HTML的CSSselect器来devise仅次于（innerHTML2）的样式。 这可能吗？ 我试过使用a[value=innerHTML2]但它似乎不工作。

Answer 1

这是不可能的使用CSS。 但是，您可以使用jQuery来做到这一点。 有一个很好的博客文章 ，你可以阅读。

Answer 2

使用CSS你不能检测到锚标签的内容。

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

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

由于value属性在标签上无效，因此不是非常有用

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

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

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

Answer 3

目前，所有的浏览器都无法使用CSS，但是使用JavaScript你可以做到这一点

 var myEles = document.getElements('a'); for(var i=0; i<myEles.length; i++){ if(myEles[i].innerHTML == ' innerHTML2 '){ console.log('gotcha'); //use javascript to style } } 

Answer 4

你可以使用css nth-child属性来访问任何元素并做任何改变。 我使用它在我制作的网站上，根据屏幕的宽度制作更小或更大的标志。

Answer 5

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

这对于第n个孩子select器来说非常简单。

 <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