Question

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

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

Answer 1

不，目前无法根据名称以某个值开头的属性的存在来选择元素。以选择开始，只能用于属性值。

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

您有以下选择：

使用格式为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>

Answer 2

使用 ES6+，您可以使用扩展运算符（我的意思是 ...），然后过滤那些属性名称以 data-d- 开头的元素：

var res = [...document.querySelectorAll("*")]
    .filter(t => [...t.attributes]
                 .filter(({ name }) => name.startsWith("data-d-")).length > 0)

console.log(res);

<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>

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

2 个答案: