在CSS中按数据属性选择元素


Answers:


776

如果您的意思是使用属性选择器,那么为什么不这样做:

[data-role="page"] {
    /* Styles */
}

我可以链接到文档中介绍各种可用于各种场景的属性选择器。请注意,尽管自定义数据属性是“新的HTML5功能”,

  • 浏览器通常在支持非标准属性方面没有任何问题,因此您应该能够使用属性选择器进行过滤;和

  • 您也不必担心CSS验证,因为CSS不在乎非命名空间的属性名称,只要它们不破坏选择器语法即可。


4
与所有导航器兼容吗?
Christophe Debove 2013年

21
@Christophe Debove:IE7 +和其他所有功能。
BoltClock

7
如果设置了data属性或通过JS更改了data属性,CSS似乎无法检测到这一点。
ᴍᴀᴛᴛʙᴀᴋᴇʀ

30
经过进一步调查,它看起来$("#element").data("field","value");并没有改变数据属性值,它仅修改了jQuery的DOM缓存版本。为了更改实际的DOM属性,需要使用$("#element").attr("data-field","value");。使我的原始评论无效。
2015年

2
是的,看起来更改数据集也可以正常工作@Matthew-jsfiddle.net/ BoltClock/k378xgj3感谢您使用jQuery。
BoltClock

107

在现代浏览器中,还可以选择属性而不管其内容如何

与:

[data-my-attribute] {
   /* Styles */
}

[anything] {
   /* Styles */
}

例如:http : //codepen.io/jasonm23/pen/fADnu

在相当大比例的浏览器上运行。

注意,这也可以在JQuery选择器中使用,也可以使用 document.querySelector


哇,我从未见过可以那样用!+1!FWIW,现在浏览器快照已经过期,我相信它可以在IE7 +中运行,因此它的支持几乎是无处不在。有趣的是,甚至连Chris Coyier都没有在这里
Camilo Martin

感谢@CamiloMartin,我删除了browsershots链接,以避免造成混乱/烦恼。
ocodo 2013年

在Chris Coyier的线程中添加了链接css-tricks.com/attribute-selectors/#comment-965838 @CamiloMartin
ocodo 2013年

1
无论如何,这些语法都不是新语法-IE6比IE7 +更不支持IE6,这让更多的人感到惊讶。您几乎可以假设IE8和更高版本支持所有CSS2.1选择器 -IE7可以完成大多数工作,尽管其中有一些难以理解的错误。所有现代浏览一段时间以来都支持3级选择器,而Chrome则是越野车。
BoltClock

1
由于我们的属性选择,虽然的话题,这是有趣的是,在3个级别中引入(子串属性选择^=*=$=)也被IE7和IE8的支持。也许它们是在IE中引入的,然后才被标准化。
BoltClock


13

您可以组合多个选择器,这很酷,您可以基于它们的值选择每个属性和属性,就像仅href基于CSS 的值一样。

通过属性选择器,您可以使用idclass属性玩一些额外的游戏

这是关于“ 属性选择器”的精彩阅读

小提琴

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

您可以在此处查看详细信息


4
    [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 */
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.