如何定位具有在 CSS 中具有任何值的属性的元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9271424/
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 do I target elements with an attribute that has any value in CSS?
提问by Marty
I know that I can target elements which have a specificattribute in CSS, for example:
我知道我可以定位在 CSS 中具有特定属性的元素，例如：
input[type=text]
{
font-family: Consolas;
}
But is it possible to target elements which have an attribute of any value (except nothing i.e. when the attribute hasn't been added to the element)?
但是是否可以定位具有任何值的属性的元素（除非没有，即当该属性尚未添加到元素时）？
Roughly something like:
大概是这样的：
a[rel=*]
{
color: red;
}
Which should target the first and third <a>tags in this HTML:
哪个应该针对<a>此 HTML 中的第一个和第三个标签：
<a href="#" rel="eg">red text</a>
<a href="#">standard text</a>
<a href="#" rel="more">red text again</a>
I figure it's possible because by default, cursor: pointerseems to be applied to any <a>tag which has a value for its hrefattribute.
我认为这是可能的，因为默认情况下，cursor: pointer似乎应用于任何<a>具有href属性值的标签。
回答by xandercoded
The following will match any anchor tag with a relattribute defined:
以下将匹配具有rel定义的属性的任何锚标记：
a[rel]
{
color: red;
}
http://www.w3.org/TR/CSS2/selector.html#pattern-matching
http://www.w3.org/TR/CSS2/selector.html#pattern-matching
Update:To account for the scenario @vsync mentioned, in the comment section (differentiating between emtpy/non-empty values), you could incorporate the CSS :notpseudo-class:
更新：考虑到@vsync 提到的场景，在评论部分（区分 emtpy/非空值），您可以合并 CSS:not伪类：
a[rel]:not([rel=""])
{
color: red;
}
回答by Daff
Yes in CSS 3 selectors there are several attribute selectors.
是的，在 CSS 3 选择器中有几个属性选择器。
E.g.
例如
[att]Represents an element with the att attribute, whatever the value of the attribute.
[att=val]Represents an element with the att attribute whose value is exactly "val".
[att~=val]Represents an element with the att attribute whose value is a whitespace-separated list of words, one of which is exactly "val". If "val" contains whitespace, it will never represent anything (since the words are separated by spaces). Also if "val" is the empty string, it will never represent anything.
[att^=val]Represents an element with the att attribute whose value begins with the prefix "val". If "val" is the empty string then the selector does not represent anything.
[att$=val]Represents an element with the att attribute whose value ends with the suffix "val". If "val" is the empty string then the selector does not represent anything.
[att*=val]Represents an element with the att attribute whose value contains at least one instance of the substring "val". If "val" is the empty string then the selector does not represent anything.
[att]表示具有 att 属性的元素，无论该属性的值如何。
[att=val]表示一个元素，其属性值为“val”。
[att~=val]表示具有 att 属性的元素，其值为以空格分隔的单词列表，其中一个正好是“val”。如果“val”包含空格，它将永远不会代表任何内容（因为单词由空格分隔）。此外，如果“val”是空字符串，它永远不会代表任何东西。
[att^=val]表示一个具有att属性的元素，其值以前缀“val”开头。如果“val”是空字符串，则选择器不代表任何内容。
[att$=val]表示一个具有att属性的元素，其值以后缀“val”结尾。如果“val”是空字符串，则选择器不代表任何内容。
[att*=val]表示具有 att 属性的元素，其值至少包含子字符串“val”的一个实例。如果“val”是空字符串，则选择器不代表任何内容。
回答by TwoHawks
Should add that if a browser sets an attribute by default you may need to work around. This does not appear to be an issue in "modern" brosers, however, this is an issue I have seen, so be sure to check cross-browser performance.
应该补充一点，如果浏览器默认设置属性，您可能需要解决。这在“现代”兄弟中似乎不是问题，但是，这是我见过的问题，所以一定要检查跨浏览器的性能。
For instance, I discovered that in IE prior to 9, colSpan is set for all TD's in a Table, so any single cell has the hidden colspan value of 1.
例如，我发现在 9 之前的 IE 中，为表中的所有 TD 设置了 colSpan，因此任何单个单元格的隐藏 colspan 值为 1。
So if you were targetting "any TD with colspan attribute" you apply in your webdoc, even the td's having no colspan attribute set, such as any TD being a single cell, will receive the css styling. IE less than 9 will basically style them all!
因此，如果您的目标是在 webdoc 中应用的“任何具有 colspan 属性的 TD”，即使 td 没有设置 colspan 属性，例如任何 TD 作为单个单元格，也会收到 css 样式。小于 9 的 IE 将基本上将它们全部样式化！
Only reason to concern over this is all the remaining XP users out there who cannot upgrade above IE8.
唯一需要担心的原因是所有剩余的 XP 用户无法升级到 IE8 以上。
So for Example, I have a group of tables where the content may shift from end to end, leaving anywhere from 1 to 7 cells blank either at the end or the beginning.
例如，我有一组表格，其中的内容可能会从头到尾移动，在末尾或开头留下 1 到 7 个单元格空白。
I want to apply a color to any blank cells at the end or the beginning utilizing the colspan attribute. Using the following will not work in IE less than 9
我想使用 colspan 属性将颜色应用于末尾或开头的任何空白单元格。在小于 9 的 IE 中使用以下将不起作用
#my td[colspan] {background-color:blue;}
...all TD's will get styled (funny since the conditional attribute styling was supposedly superior in IE, but I digress...).
...所有 TD 都将被样式化（有趣，因为条件属性样式在 IE 中据说更胜一筹，但我离题了...）。
Using the following works across all browsers when I set the value of colspan to 'single' for any solitary cell/TD I wish to include in the styling scheme, however its a 'hack' and will not properly validate...
当我将 colspan 的值设置为我希望包含在样式方案中的任何单独单元格/TD 的“单个”时，在所有浏览器中使用以下工作，但是它是一个“黑客”并且不会正确验证......
#my td[colspan="single"] {background-color:blue;} /* 'single' could be anything */
#my td[colspan="2"] {background-color:blue;}
#my td[colspan="3"] {background-color:blue;}
#my td[colspan="4"] {background-color:blue;}
#my td[colspan="5"] {background-color:blue;}
#my td[colspan="6"] {background-color:blue;}
#my td[colspan="7"] {background-color:blue;}
Alternatively you should be able to more appropriately address the issue using conditional styling using "if lt IE 9" to override. It would be the correct way to do this, just keep in mind you must hide the "properly constructed css" from IElt9 in the process, and I think the only proper way to do that is with selective style sheets.
或者，您应该能够使用“if lt IE 9”覆盖的条件样式更恰当地解决问题。这将是执行此操作的正确方法，请记住，您必须在此过程中从 IElt9 中隐藏“正确构造的 css”，我认为唯一正确的方法是使用选择性样式表。
Most of us already do that anyway, but regardless, you still do well to consider and test if a browser applies an auto-attribute when it sees none, and how it may handle your otherwise corect syntax for styling on attribute values.
无论如何，我们大多数人已经这样做了，但无论如何，您仍然可以很好地考虑和测试浏览器是否在没有看到自动属性时应用自动属性，以及它如何处理用于属性值样式的其他正确语法。
(btw, colspan just happens not to be in the css specification yet [as of css3], so this example throws no validation error.)
（顺便说一句，colspan 恰好不在 css 规范中 [as of css3]，所以这个例子不会引发验证错误。）
