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

    [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 */
}

您可以组合多个选择器，这很酷，知道您可以基于它们的值选择每个属性和属性，例如仅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

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

值得注意的是CSS3子串属性选择器

[attribute^=value] { /* starts with selector */
/* Styles */
}

[attribute$=value] { /* ends with selector */
/* Styles */
}

[attribute*=value] { /* contains selector */
/* Styles */
}

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

与：

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

[anything] {
   /* Styles */
}

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

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

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

如果您想使用属性选择器，请确定为什么：

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

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

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

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