8wDlpd.png
首页
8wDFp9.png
分类
8wDEOx.png
8wDMfH.png
消息
8wDKte.png
我的
  2. css
  3. CSS 选择器按属性名称开始匹配元素

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

Bastien Durel 2月前
81 0

是否有任何 CSS 选择器可以匹配这些元素？（我需要它来进行广告拦截器配置，查看了 W3C 选择器文档 - 没有找到任何提示。需要通用解决方案，因为 data-d- 之后的部分

是否有任何 CSS 选择器可以匹配这些元素？（我需要它进行 adblocker 配置，查看了 W3C selectors 文档 - 没有找到任何提示。 需要 通用 part after data-d- gets randomized by the site ）。 

<div data-d-9y3x>
<div data-d-m01>
<div data-d-whatever>
帖子版权声明 1、本帖标题：CSS 选择器按属性名称开始匹配元素
    本站网址：http://xjnalaquan.com/
2、本网站的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、站长邮箱：yeweds@126.com 除非注明，本帖由Bastien Durel在本站《css》版块原创发布， 转载请注明出处！
收藏的用户（0） X
正在加载信息~
最新回复 (0)
  • J_H 2月前 0 只看Ta
    引用 2楼

    不可以，目前无法根据名称以 某个值 开头 以...开头的 选择仅适用于属性值。

    CSS 选择器 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>
  • 引用 3楼

    我希望 CSS 足够灵活 :)。我已经完成了一些 JS + Greasemonkey 的帮助。

  • 引用 4楼

    干杯。是的，在 greymonkey 中也做了同样的事情，希望以后读者能读到你的答案。题外话：我在这个网站上第五次调整了 adblock :) 他们似乎在用越来越狡猾的技巧调整他们的页面，只是惊叹于这种针对用户点击广告的“隐形斗争”:)。干杯，我不知道你可以在 SO 中添加有效的代码片段。

  • 引用 5楼

    您 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>
  • 引用 6楼

    @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)
返回
作者最近主题：