HTML5 custom elements wildcard CSS selector

问题

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>

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?

回答1:

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

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.

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

来源：https://stackoverflow.com/questions/37409803/html5-custom-elements-wildcard-css-selector