问题描述

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

最佳解决方案

如果您的意思是使用 attribute selector，那么，为什么不：

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

有各种各样的属性选择器可以用于各种场景，这些场景都在我链接到的文档中。请注意，尽管自定义数据属性是 「新的 HTML5 功能」，

  • 浏览器通常没有任何支持 non-standard 属性的问题，所以您应该能够使用属性选择器进行过滤; 和

  • 您不必担心 CSS 验证，因为 CSS 不关心 non-namespaced 属性名称，只要它们不会中断选择器语法。

次佳解决方案

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

有：

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

[anything] {
   /* Styles */
}

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

在很大一部分浏览器上工作。

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

第三种解决方案

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

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

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

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

参考文献

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。