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

CSS selector to match elements by attribute's name start

本文关键字：开始 选择器 属性 元素 CSS      更新时间：2023-09-26

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

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

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

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>

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

@Alireza_Ahmadi的答案非常好，可以扩展到使用主节点选择器精确地针对合格属性。。。

具有专用属性的jQ的标准选择器为：jQuery('[role="field-form"]')

var res = [...(jQuery('[role="field-form"]').get())]
    .filter(t => [...t.attributes]
                 .filter(({ name }) => name.startsWith("formula_")).length > 0)
相关文章：