用于按属性名称开始匹配元素的CSS选择器

Question

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

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

Answer 1

不，目前无法根据名称以特定值开头的属性的存在来选择元素。在与开始选择仅可用于属性值。

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

您有以下选择：

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

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>