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

【问题标题】：CSS selector to match elements by attribute's name startCSS选择器通过属性名称匹配元素开始
【发布时间】：2016-03-03 00:08:03
【问题描述】：

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

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

【问题讨论】：

据我所知，以开头的匹配仅适用于属性值，而不适用于属性名称。您很可能不得不在 CSS 中使用三个选择器。

标签： javascript css css-selectors

【解决方案1】：

不，目前无法根据名称为 starting with 的属性的存在来选择元素。 starts with 选择只能用于属性值。

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>

【讨论】：

我希望 CSS 足够灵活 :)。我已经完成了一些 JS + Greasemonkey 的帮助。
@Max：我添加了一个 JS 示例以防万一。
干杯。是的，在greasemonkey中做了同样的事情，让它成为你答案的未来读者。题外话：我在那个网站上第 5 次调整 adblock :) 他们似乎用越来越多的狡猾技巧来调整他们的页面，只是惊叹于用户点击广告的“隐形战斗”:)。干杯，我不知道你可以在 SO 中添加工作代码 sn-ps。

【解决方案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>

【讨论】：