javascript - CSS 选择器通过属性名称开始匹配元素

Question

是否有任何 CSS 选择器来匹配这些元素？ (我需要它用于 adblocker 配置，查看了 W3C 选择器 文档 - 没有找到任何提示。需要通用解决方案，因为 部分 data-d- 由站点随机生成)。

<div data-d-9y3x>
<div data-d-m01>
<div data-d-whatever>

Answer 1

不，目前无法根据名称为以 某个值开头的属性的存在来选择元素。 starts with 选择仅适用于属性值。

CSS Selectors Level 4 spec 中没有提到这样的选择器也因此它看起来不会很快可用。

您有以下选择:

• 使用格式为 element[attribute-name] 的所有可能属性名称值的选择器组。但是当确切的属性名称不固定/未知时，此选项不可行。
• 使用 JavaScript(或您喜欢的其他脚本库)。以下是一个非常快速的粗略示例，以供 future 访问者使用。

var el = document.getElementsByTagName('div');

for (var i = 0; i < el.length; i++) {
  var attr = el[i].attributes; /* get all attributes on the element */
  for (var j = 0; j < attr.length; j++) {
    if (attr[j].name.indexOf('data-') == 0) { /* if element has an attribute whose name has data- */
      el[i].style.color = 'red';
      break;
    }
  }
}

<div data-d-9y3x>Some</div>
<div data-d-m01>text</div>
<div data-d-whatever>content</div>
<div test-data-d-whatever>and</div>
<div d-whatever>more</div>
<div testdata-d-whatever>...</div>