基于通配符的属性名称 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 属性的value。

• E[foo="bar"]

  一个 E 元素，其“foo”属性值恰好是 等于“条”

---

• E[foo~="bar"]

  一个 E 元素，其“foo”属性值是一系列以空格分隔的值，其中之一恰好等于“bar”

---

• E[foo^="bar"]

  一个 E 元素，其“foo”属性值完全以字符串“bar”开头

---

• E[foo$="bar"]

  一个 E 元素，其“foo”属性值完全以字符串“bar”结尾

---

• E[foo*="bar"]

  “foo”属性值包含子字符串“bar”的 E 元素

---

• 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 规范}

---

来自类似问题的另一个答案：

最近有一个 线程 在 [email protected] 邮件列表中，来自 Opera 的 Simon Pieters 提出了一个很好的可能 语法 这已经在线程中得到了一些接受，所以有可能 它将在未来的某个时候成为标准：

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

Answer 2

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

Answer 3

对于 data- 属性，有一个属性“data-set”，它包含单个字符串中所有 data-* 属性的列表。使用现有的通配符运算符进行操作可能是解决方案：

[data-set*="bar:"]

会选择具有 data-bar 属性的元素（即使是空值！），而且如果有 data-foobar 属性（“:”是为了确保它是属性名称，而不是属性值）

Answer 4

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

[

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