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

时间:2016-05-24 09:40:03

标签: css html5 css-selectors custom-element

我有一堆自定义HTML元素,例如ass 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>

不幸的是,由于代码生成过程,并不总是可以为我的自定义元素设置类和其他属性,所以我想知道是否可以编写一个匹配所有foo和{的CSS选择器{1}}元素?

1 个答案:

答案 0 :(得分:4)

您无法在标记名称上执行regexp选择器。您只能对属性值执行regexp。

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

如果您无法修改HTML以创建公共属性,我宁愿只写出所有变体。