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

Question

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

Answer 1

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

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

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

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

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

Answer 2

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

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

/* Styles */

}

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

/* Styles */

}

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

/* Styles */

}