CSS选择器是否支持元序列与量词？如何实现正则式属性匹配？

问题 #

我想用Node.js的node-html-parser捕获所有style属性包含background: url(或background-image: url(的元素，当前代码如下：

import type { HTMLElement } from "node-html-parser";

const rootHTML_Element: HTMLElement = /* ... */;

for (
  const variadicElement of
      this.rootHTML_Element.querySelectorAll("[style*=\"background: url(\"]").
          concat(this.rootHTML_Element.querySelectorAll("[style*=\"background-image: url(\"]"))
) {
  // ...
}

（浏览器JavaScript里的querySelectorAll行为应该和这个一致）

但当前代码只能精确匹配，一旦background:和url之间有空格（或者没有空格）就会失效。如果用正则表达式实现的话，写法是：

style="background(?:-image)?:\s*url\(

想问下怎么用CSS选择器实现同样的效果？

解决方案 #

CSS属性选择器本身不支持正则表达式，没法直接实现和你写的正则完全一致的匹配逻辑。不过可以通过组合多个属性选择器，覆盖background/background-image和url(之间可能的空白情况，尽可能覆盖更多场景：

[style*="background:url("],
[style*="background: url("],
[style*="background:  url("],
[style*="background:\turl("],
[style*="background-image:url("],
[style*="background-image: url("],
[style*="background-image:  url("],
[style*="background-image:\turl("]

但这种方法有明显局限：没法覆盖所有可能的空白字符（比如换行），也没法处理background前面有其他样式的复杂情况。

更靠谱的方式是先用querySelectorAll选中所有带style属性的元素，再用JavaScript正则去筛选符合条件的元素：

import type { HTMLElement } from "node-html-parser";

const rootHTML_Element: HTMLElement = /* ... */;
const matchRegex = /background(?:-image)?:\s*url\(/i; // 加`i`可忽略大小写，按需选择

const targetElements = Array.from(rootHTML_Element.querySelectorAll('[style]'))
  .filter(element => matchRegex.test(element.getAttribute('style') || ''));

for (const variadicElement of targetElements) {
  // 处理目标元素的逻辑
}

这种方式既灵活，又能完全匹配你需要的正则规则，比纯CSS选择器的方案更可靠。

内容的提问来源于stack exchange，提问作者Takeshi Tokugawa YD