8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

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)
  • 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>
  • 我希望 CSS 足够灵活 :)。我已经完成了一些 JS + Greasemonkey 的帮助。

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

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