Html 通过 CSS 中的数据属性选择元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5324415/
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
Select elements by data attribute in CSS
提问by Diogo Cardoso
Is it possible to select elements in CSS by their HTML5 data attributes (for example, data-role)?
是否可以通过 HTML5 数据属性（例如，data-role）选择 CSS 中的元素？
回答by BoltClock
If you mean using an attribute selector, sure, why not:
如果您的意思是使用属性选择器，当然，为什么不：
[data-role="page"] {
/* Styles */
}
There are a variety of attribute selectors you can use for various scenarios which are all covered in the document I link to. Note that, despite custom data attributes being a "new HTML5 feature",
有多种属性选择器可用于各种场景，这些都在我链接到的文档中有所介绍。请注意，尽管自定义数据属性是“新的 HTML5 功能”，
browsers typically don't have any problems supporting non-standard attributes, so you should be able to filter them with attribute selectors; and
you don't have to worry about CSS validation either, as CSS doesn't care about non-namespaced attribute names as long as they don't break the selector syntax.
浏览器通常在支持非标准属性方面没有任何问题，因此您应该能够使用属性选择器过滤它们；和
您也不必担心 CSS 验证，因为 CSS 不关心非命名空间属性名称，只要它们不破坏选择器语法即可。
回答by ocodo
It's also possible to select attributes regardless of their content, in modern browsers
在现代浏览器中，无论内容如何，都可以选择属性
with:
和：
[data-my-attribute] {
/* Styles */
}
[anything] {
/* Styles */
}
For example: http://codepen.io/jasonm23/pen/fADnu
例如：http: //codepen.io/jasonm23/pen/fADnu
Works on a very significant percentage of browsers.
适用于很大比例的浏览器。
Note this can also be used in a JQuery selector, or using document.querySelector
注意这也可以用在 JQuery 选择器中，或者使用 document.querySelector
回答by Matas Vaitkevicius
It's worth noting CSS3 substring attribute selectors
值得注意的是 CSS3 子字符串属性选择器
[attribute^=value] { /* starts with selector */
/* Styles */
}
[attribute$=value] { /* ends with selector */
/* Styles */
}
[attribute*=value] { /* contains selector */
/* Styles */
}
回答by Aamir Shahzad
You can combine multiple selectors and this is so cool knowing that you can select every attribute and attribute based on their value like hrefbased on their values with CSS only..
您可以组合多个选择器，知道您可以根据它们的值选择每个属性和属性，就像href仅使用 CSS的值一样，这真是太酷了。
Attributes selectors allows you play around some extra with idand classattributes
属性选择器允许你玩一些额外的id和class属性
Here is an awesome read on Attribute Selectors
这是关于属性选择器的精彩读物
a[href="http://aamirshahzad.net"][title="Aamir"] {
color: green;
text-decoration: none;
}
a[id*="google"] {
color: red;
}
a[class*="stack"] {
color: yellow;
}<a href="http://aamirshahzad.net" title="Aamir">Aamir</a>
<br>
<a href="http://google.com" id="google-link" title="Google">Google</a>
<br>
<a href="http://stackoverflow.com" class="stack-link" title="stack">stack</a>Browser support:
IE6+, Chrome, Firefox & Safari
浏览器支持：
IE6+、Chrome、Firefox 和 Safari
You can check detail here.
回答by Naved Khan
[data-value] {
/* Attribute exists */
}
[data-value="foo"] {
/* Attribute has this exact value */
}
[data-value*="foo"] {
/* Attribute value contains this value somewhere in it */
}
[data-value~="foo"] {
/* Attribute has this value in a space-separated list somewhere */
}
[data-value^="foo"] {
/* Attribute value starts with this */
}
[data-value|="foo"] {
/* Attribute value starts with this in a dash-separated list */
}
[data-value$="foo"] {
/* Attribute value ends with this */
}
