CSS 选择器中是否可以使用元序列和量词？

Question

我期望下面的代码将捕获具有

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(\"]"))
) {
  // ...
}

（我正在使用

node-html-parser

（这意味着，对于 Node.js），但我认为浏览器 JavaScript 中的

querySelectorAll

具有相同的行为）。

上面的代码在完全匹配的情况下有效，但例如，如果

background:

和

url

之间没有空格，则它将不起作用。 为了解决这个问题，需要元序列和量词。 如果是正常的正则表达式，解决方案是：

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

如何让 CSS 选择器获得相同的效果？

Answer 1

正如 CBro 所提到的，正则表达式不是一个选项。你可以做这样的事情（你需要在选择器中包含空格等）

注意！末尾的“i”使选择器不区分大小写

:is( 
  /* note the white space must match */
  [style*="background-image: url(" i], 
  [style*="background-image:url(" i], 
  [style*="background: url(" i], 
  [style*="background:url(" i]) {
  outline: 2px solid;
}

div {
  margin: .25rem;
  padding: .25rem;
}

div::after {
  content: ': <div style="' attr(style) '">';
}

<div style="color: green; background: url(...)">Should Match</div>
<div style="color: green; background:url(...)">Should Match</div>

<div style="color: darkred; background: tomato">Shouldn't Match</div>

<div style="color: green; BACKGROUND-image: url(...) ">Should Match</div>
<div style="color: green; background-image:url(...) ">Should Match</div>