css - 是否有可靠的选择器可以根据样式选择元素？

Question

这是我写的一个函数。它可以很好地获取具有特定属性的最近元素:

// Example of attribute if id

export function getClosestAttribute(
  element: SVGElement,
  attribute: keyof typeof svgAttributeToCssStyle,
  excludeElement: boolean
): string | null {
  let firstIncludedEl: Element | null = element;
  if (excludeElement) {
    firstIncludedEl = element.parentElement;
  }
  if (!firstIncludedEl) {
    return null;
  }
  const closestEl = firstIncludedEl.closest(`[${attribute}]`);
  if (!closestEl) {
    return null;
  }

  return closestEl.getAttribute(attribute);
}

是否可以为样式编写类似的东西？例如。我想选择具有 style="...fill:..." 的任何元素?

Answer 1

更新
另一种方法是匹配两个规则。第一个“开始于”规则匹配:color: red ，但不是 background-color: red .

div[style^="color:"] {
  text-decoration: underline;
}

当字符串出现在 style 后面的任何位置时，第二条规则匹配值(value):

div[style*=" color:"] {
  text-decoration: underline;
}

然后我们将它们链接在一起:

div[style^="color:"],
div[style*=" color:"] {
  text-decoration: underline;
  opacity: 0.5;
}

<div style="background-color: red;">Should not match
</div>

<div style="font-size: 20px; color: red;">Match
</div>

<div style="color: red; font-size: 32px;">Match
</div>

<div style="font-size: 20px; background-color: red;">Should not match
</div>

__
您可以使用 attribute selector并寻找 style包含您选择的字符串的值。但是，空白很重要。如果您正在寻找 style*="color: red"但是你的 style值在 color: 之间没有空格和 red ，选择器将找不到匹配项。

[attr*=value]Represents elements with an attribute name of attr whose value contains at least one occurrence of value within the string.

例子:

div[style*="color: red"] {
  text-decoration: underline;
}

<div style="color: blue;">Regular div
</div>

<div style="color: red;">Add an underline
</div>