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

Question

是否可以通过HTML5数据属性选择CSS中的元素(例如data-role)？

Answer 1

如果您的意思是使用属性选择器,请确保,为什么不:

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

您可以使用各种属性选择器来处理各种场景,这些场景都包含在我链接到的文档中.请注意,尽管自定义数据属性是"新的HTML5功能",

• 浏览器通常不支持非标准属性,因此您应该能够使用属性选择器对它们进行过滤; 和

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

Answer 2

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

有:

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

[anything] {
   /* Styles */
}

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

适用于很大比例的浏览器.

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

Answer 3

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

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

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

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

Answer 4

你可以组合多个选择器,这很酷,因为你知道你可以根据它们的值选择每个属性和属性,就像href它们只用CSS一样.

属性选择器允许您玩一些额外的with 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

你可以在这里查看细节.

Answer 5

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