如何 CSS：根据内部 HTML 选择元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4811962/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to CSS: select element based on inner HTML
提问by whamsicore
<a href="example1.com"> innerHTML1 </a>
<a href="example2.com"> innerHTML2 </a>
<a href="example3.com"> innerHTML3 </a>
I want to style the second only (innerHTML2) using CSS selectors, based on the inner HTML. Is this possible? I've tried using a[value=innerHTML2]but it doesn't seem to work.
我想基于内部 HTML 使用 CSS 选择器为第二个 (innerHTML2) 设置样式。这可能吗？我试过使用，a[value=innerHTML2]但似乎不起作用。
采纳答案by Marc W
回答by u476945
It's currently not possible for all browsers with css, but with javascript you can do this
目前并非所有带有 css 的浏览器都可以使用，但是使用 javascript 可以做到这一点
Updated w/ working code. JSFiddle link below:
更新了工作代码。JSFiddle链接如下：
Initial HTML per @whamsicore:
每个@whamsicore 的初始 HTML：
<a href="example1.com"> innerHTML1 </a>
<a href="example2.com"> innerHTML2 </a>
<a href="example3.com"> innerHTML3 </a>
JavaScript:
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 for styling:
用于样式的 CSS：
/* make this look a bit more visible */
a{
display: block;
}
.gotcha{
color: red;
}
回答by Jason
Using CSS you can't detect the content of the anchor tag.
使用 CSS，您无法检测锚标记的内容。
[value=]would refer to an attribute on the tag
[value=]将引用标签上的属性
<a href="" value="blah"> innerHTML2 </a>
Not very useful since the value attribute isn't valid HTML on an atag
不是很有用，因为 value 属性不是a标签上的有效 HTML
If possible, slap a class on that atag. As that is most likely not possible (because you would've already done that) you can use jQuery to add a class on that tag. Try something like this:
如果可能，请在该a标签上打一个班级。由于这很可能不可能（因为您已经这样做了），您可以使用 jQuery 在该标签上添加一个类。尝试这样的事情：
<script type="text/javascript">
$(function(){ $('a:contains(innerHTML2)').addClass('anchortwo'); });
</script>
And then use .anchortwoas your class selector.
然后.anchortwo用作您的类选择器。
回答by Abhansh Giri
you can use the css nth-child property to access any element and do any changes. i Used it on a website i made to make a logo smaller or bigger based on the width of screen.
您可以使用 css nth-child 属性访问任何元素并进行任何更改。我在我制作的网站上使用它根据屏幕宽度缩小或放大徽标。
回答by kenorb
回答by ratoupoilu
<style>
a[data-content]::before {
content: attr(data-content);
}
a[data-content="innerHTML2"] {
color: green;
}
</style>
<a href="example1.com" data-content="innerHTML1"> </a>
<a href="example2.com" data-content="innerHTML2"> </a>
<a href="example3.com" data-content="innerHTML3"> </a>
回答by josefnpat
This is quite simple with a nth-child selector.
这对于 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>
Edit: Here's the source I found this at. Check here for browser compatability. Source: http://reference.sitepoint.com/css/pseudoclass-nthchild
编辑：这是我找到的来源。在此处查看浏览器兼容性。来源：http: //reference.sitepoint.com/css/pseudoclass-nthchild
