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