HTML5自定义元素通配符CSS选择器 [英] HTML5 custom elements wildcard CSS selector

问题描述

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

I have a bunch of custom HTML elements such ass bar-el, bar-el2, foo, foo-bar, foo-bar-2. I can do the following:

<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选择器元素?

Unfortunately due to the code generation process it's not always possible to set class and other attributes for my custom elements, so I'd like to know if it's possible to write a CSS selector that matches all foo and foo-* elements?

推荐答案

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

You cannot do regexp selectors on tag names. You can only perform regexps on attribute values.

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

You could create your own JavaScript function that fetches all elements using document.querySelectorAll('*'), do a string comparison on the tagName property for each element in the result, and only return the elements that match.

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

If you cannot modify the HTML to create a common attribute, I would prefer to just write out all the variants.

这篇关于HTML5自定义元素通配符CSS选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！