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

【问题标题】：HTML5 custom elements wildcard CSS selectorHTML5 自定义元素通配符 CSS 选择器
【发布时间】：2016-05-24 09:40:03
【问题描述】：

我有一堆自定义 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>

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

【问题讨论】：

请注意，自定义 HTML 标记 必须包含破折号 (-)，因此 <foo> 无效，而 <foo-bar> 有效。

标签： css html css-selectors custom-element

【解决方案1】：

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

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

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

【讨论】：