CSS中使用属性选择器选取元素

Question

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

Answer 1

也可以在现代浏览器中选择属性，而不考虑其内容。

使用以下代码：

[data-my-attribute] {
   /* 样式 */
}

[anything] {
   /* 样式 */
}

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

适用于大部分浏览器。

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

Answer 2

如果您是指使用属性选择器，当然可以：

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

有各种各样的属性选择器可用于不同的场景，这些都在我提供的文档中有详细介绍。请注意，尽管自定义数据属性是一个“新的HTML5功能”，

• 浏览器通常没有问题支持非标准属性，因此您应该能够使用属性选择器进行过滤；并且

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