基于通配符的属性名称的CSS选择器

Question

我最近一直在研究CSS选择器,并且遇到了关于新的"data-*"属性的问题.

我理解为了选择具有数据属性的元素,有几种方法可以解决它:

[data-something='value']{...}    // data-something has value = 'value'
[data-something^='value']{...}   // data-something has value that STARTS with 'value'
[data-something*='value']{...}   // data-something has value with 'value SOMEWHERE in it

这些还有其他变体,但我的问题涉及CSS选择器,它们可以定位只具有"数据"属性的元素.更具体地说,是否有一个CSS选择器可以定位具有任何"数据"属性的元素？

虽然不正确,但我想的是:

[data]{...}

我一直在搜索Google,但还没有找到关于该属性的通用选择器的任何内容.

Answer 1

正如您所指出的,有多种方法可以定位HTML属性的值.

• E [富= "酒吧"]

  一个E元素,其"foo"属性值恰好 等于"bar"

• E [FOO〜= "酒吧"]

  一个E元素,其"foo"属性值是一个以空格分隔的值列表,其中一个值恰好等于"bar"

• E [FOO ^ = "酒吧"]

  一个E元素,其"foo"属性值恰好以字符串"bar"开头

• E [FOO $ = "酒吧"]

  一个E元素,其"foo"属性值与字符串"bar"完全结束

• E [FOO*= "酒吧"]

  一个E元素,其"foo"属性值包含子串"bar"

• E [FOO | = "EN"]

  一个E元素,其"foo"属性具有以连字符分隔的值列表(从左侧开始),带有"en"

但是只有一种方法可以定位属性名称本身:

• E [FOO]

  带有"foo"属性的E元素

因此,目前没有通配符属性名称的方法:

div[data-*] { ... } /* may be useful, but doesn't exist */
div[data-^] { ... } /* may be useful, but doesn't exist */

_{来源:W3C选择器3级规范}

从另一个答案到类似的问题:

www-style@w3.org邮件列表中有一个最近的 帖子,来自Opera的Simon Pieters提出了一个很好的可能 语法 ,在线程中得到了一些接受,因此有可能它会成为标准的一些未来:

x-admin-* { ... }
[data-my-*] { ... }

Answer 2

不,CSS选择器中的属性名称没有通配符.所有属性选择器都违反属性的特定名称.