除了 ^,$,* 之外的 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]

我在 my blog 上写了一篇文章如果您有兴趣，可以为每个选择器提供一些不错的示例。