在CSS中按数据属性选择元素 [英] Select elements by data attribute in CSS

问题描述

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

Is it possible to select elements in CSS by their HTML5 data attributes (for example, data-role)?

推荐答案

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

If you mean using an attribute selector, sure, why not:

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

有多种属性选择器可以用于各种情况，链接到的文档。请注意，尽管自定义数据属性是新HTML5功能，但

There are a variety of attribute selectors you can use for various scenarios which are all covered in the document I link to. Note that, despite custom data attributes being a "new HTML5 feature",

• 浏览器通常没有任何问题支持 - 标准属性，因此您应该能够使用属性选择器过滤它们;和

• browsers typically don't have any problems supporting non-standard attributes, so you should be able to filter them with attribute selectors; and

您不必担心CSS验证，因为CSS不关心非命名空间的属性名称，打破选择器语法。

you don't have to worry about CSS validation either, as CSS doesn't care about non-namespaced attribute names as long as they don't break the selector syntax.

这篇关于在CSS中按数据属性选择元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！