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”属性的E元素

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

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

_{来源：W3C Selectors Level 3 Specification}

从another answer到类似的问题：

最近有一个   thread   在www-style@w3.org邮件列表中，来自Opera的Simon Pieters   提出了一个很好的可能   syntax   在线程中有一些接受，所以有可能   它将成为未来的标准：
x-admin-* { ... }
[data-my-*] { ... }

Answer 2

不，CSS选择器中的属性名称没有通配符。所有attribute selectors都包含属性的特定名称。

Answer 3

是，您可以选择具有指定属性值的所有元素：

[type] selects all elements that have a type="anything". attribute

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

3 个答案: