是否可以通过CSS5的HTML5数据属性(例如,data-role
)来选择元素?
是否可以通过CSS5的HTML5数据属性(例如,data-role
)来选择元素?
Answers:
如果您的意思是使用属性选择器,那么为什么不这样做:
[data-role="page"] {
/* Styles */
}
我可以链接到文档中介绍各种可用于各种场景的属性选择器。请注意,尽管自定义数据属性是“新的HTML5功能”,
浏览器通常在支持非标准属性方面没有任何问题,因此您应该能够使用属性选择器进行过滤;和
您也不必担心CSS验证,因为CSS不在乎非命名空间的属性名称,只要它们不破坏选择器语法即可。
$("#element").data("field","value");
并没有改变数据属性值,它仅修改了jQuery的DOM缓存版本。为了更改实际的DOM属性,需要使用$("#element").attr("data-field","value");
。使我的原始评论无效。
在现代浏览器中,还可以选择属性而不管其内容如何
与:
[data-my-attribute] {
/* Styles */
}
[anything] {
/* Styles */
}
例如:http : //codepen.io/jasonm23/pen/fADnu
在相当大比例的浏览器上运行。
注意,这也可以在JQuery选择器中使用,也可以使用 document.querySelector
^=
,*=
和$=
)也被IE7和IE8的支持。也许它们是在IE中引入的,然后才被标准化。
值得注意的是CSS3子串属性选择器
[attribute^=value] { /* starts with selector */
/* Styles */
}
[attribute$=value] { /* ends with selector */
/* Styles */
}
[attribute*=value] { /* contains selector */
/* Styles */
}
您可以组合多个选择器,这很酷,您可以基于它们的值选择每个属性和属性,就像仅href
基于CSS 的值一样。
通过属性选择器,您可以使用id
和class
属性玩一些额外的游戏
这是关于“ 属性选择器”的精彩阅读
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>
浏览器支持:
IE6 +,Chrome,Firefox和Safari
[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 */
}