css - 除了 ^,$,* 之外的 CSS 正则表达式

Question

我知道你可以做类似的事情

a[href^="http"]{...}
a[data-test*="test"]{...}
a[href$=".com"]{...}

但是除了 ^、$ 和 * 之外，你还能在 CSS/3 中使用任何其他更复杂的正则表达式（而不是像 less 或 sass 这样的框架）吗？

Answer 1

不幸的是（幸运的是？）它没有完全支持正则表达式。您缺少的是[attr~=val]和[attr|=val]。以下是所有带有描述的属性选择器：

/* if attr exists */
a[attr]

/* if attr equals val */
a[attr=val]

/* attr is a whitespace-separated list where val is one of the values */
a[attr~=val]

/* attr's value is val followed by '-' (designed for culture codes) */
a[attr|=val]

/* attr starts with val */
a[attr^=val]

/* attr ends with val */
a[attr$=val]

/* attr contains val */
a[attr*=val]

如果您有兴趣，我在我的博客上写了一篇文章，其中包含每个选择器的一些不错的示例。

Answer 2

首先，所有 CSS 级别 1、2 和 3 选择器都记录在选择器级别 3 W3C 建议中。所有这些都可以在本文档的第 2 节中找到。

使用方括号[]的选择器称为属性选择器（第 6.3 节）。我们在这里感兴趣的进一步分为两种类型：

属性存在和值选择器 ( 6.3.1 )

这些是在 CSS2 中引入的：

[att]
表示具有 att 属性的元素，无论该属性的值如何。

[att=val]
表示具有 att 属性的元素，其值正好是“val”。

[att~=val]
表示具有 att 属性的元素，其值为以空格分隔的单词列表，其中一个恰好是“val”。如果“val”包含空格，它永远不会代表任何东西（因为单词是用空格分隔的）。此外，如果“val”是空字符串，它永远不会代表任何东西。

[att|=val] 表示具有 att 属性的元素，其值要么正好是“val”，要么以“val”开头，紧跟“-”（U+002D）。这主要是为了允许语言子代码匹配（例如，HTML 中 a 元素上的 hreflang 属性），如 BCP 47 ([BCP47]) 或其后续版本中所述。对于 lang（或 xml:lang）语言子代码匹配，请参见 :lang 伪类。

子字符串匹配属性选择器（6.3.2）

这些是在 CSS3 中引入的：

[att^=val] 表示具有 att 属性的元素，其值以前缀“val”开头。如果 "val" 是空字符串，则选择器不代表任何内容。

[att$=val] 表示具有 att 属性的元素，其值以后缀“val”结尾。如果 "val" 是空字符串，则选择器不代表任何内容。

[att*=val] 表示具有 att 属性的元素，其值包含至少一个子字符串“val”的实例。如果 "val" 是空字符串，则选择器不代表任何内容。

选择器级别 4 W3C 工作草案[att=val]通过允许不区分大小写来扩展选择器： [att=val i]. 然而，到目前为止还没有添加更多的属性选择器。

[att^=val]回答您的问题：不，除了,[att$=val]和之外，没有其他匹配属性选择器的子字符串[att*=val]。