css - 如何使用 CSS 选择自定义元素的一部分？

Question

选择所有以类名 foo 开头的元素。我可以用: [class^="foo"] { }

我可以使用什么来选择以 foo 开头的自定义元素。

例子:

<foo-bar>Hola</foo-bar>
<foo-bazz>Hola</foo-bazz>

我想为两个元素使用一个选择器。

Answer 1

你不能。 [...] 选择器仅适用于属性，不适用于元素类型本身。

不过，我相信您已经知道，您可以做的是将它们全部链接到一个选择器组中，但这意味着您需要知道确切的元素名称:

foo-bar,
foo-bazz {
  ...
}

否则，您总是可以只给它们一个共享的 class 或 data-* 属性:

<foo-bar class="foo"></foo-bar>
<foo-bazz class="foo"></foo-bazz>

.foo {
  ...
}