HTML5自定义元素通配符CSS选择器

Question

我有一堆自定义HTML元素，例如bar-el, bar-el2, foo, foo-bar, foo-bar-2。我可以执行以下操作：

<bar-el class="custom-bar">
  <foo class="custom-foo">
    <foo-bar name="bar" class="custom-foo">
      Content
    </foo-bar>
    <foo-bar2 name="bar2" class="custom-foo">
      Content
    </foo-bar2>
  </foo>
</bar>

不幸的是，由于代码生成过程的缘故，并非总是可以为自定义元素设置类和其他属性，所以我想知道是否有可能编写与all foo和foo-*elements 匹配的CSS选择器？

Answer 1

您不能对标签名称执行正则表达式选择器。您只能对属性值执行正则表达式。

您可以创建自己的JavaScript函数，使用来获取所有元素document.querySelectorAll('*')，tagName对结果中的每个元素的属性进行字符串比较，然后仅返回匹配的元素。

如果您不能修改HTML来创建公共属性，我宁愿只写出所有变体。