所有以开头的标签

Question

有没有办法为所有以某个前缀开头的标签指定样式？

例如：

tst-* {
  display: block;
  background: yellow;
}

<tst-some-tag>一些内容</tst-some-tag>

---

我需要这样的选择器，是因为我正在使用Angular并且有很多自定义组件。它们都应该显示为块级元素。为所有自定义元素指定display属性可能非常方便，而不是每次使用它们时都添加类。

- Bogdan Gishka

---

每个HTML标签都有特定的用途。如果您想将相同的样式应用于不同的标签，请使用class并与其一起使用样式。 - Mohammad Usman

你不能选择同一个标签名的部分。你必须添加类或自定义 data-* 属性，并应用 @to7be 回答中的解决方案。 - Marcos Pérez Gude

Answer 1

如果您想通过类名选择元素，可以使用以下方式：[class^='class'] 如果您想通过id选择元素，只需执行以下操作：[id^='id'] 在两种情况下，您都可以选择所有以单引号之间的文本为开头的元素，无论是按类名还是按id。

也可以进行变化：div[class^='class'] 或 div[id^='id']

- to7be

Answer 2

你可以在Angular中为那些具有相同CSS的元素添加另一个类。

<tst-some-tag class="tst-class">Some content</tst-some-tag>

你可以像使用jQuery一样简单地为Angular添加类

var myEl = angular.element( document.querySelector( 'tst-some-tag' ) );
myEl.addClass('tst-class');

- Mojo Allmighty

---

这不是一个选项，因为 querySelector 方法使用CSS选择器，所以仍然无法使用 tst-* 结构。 如果我仍然必须指定所有必须具有特定样式的标签，那么我不明白 angular.element( document.querySelector( 'tst-some-tag' ) ) 如何帮助我。这意味着我将不得不编写：angular.element( document.querySelector( 'tst-some-tag，tst-some-tag-2，tst-some-tag-3 ... tst-some-tag-N' ) )。 - Bogdan Gishka

Answer 3

根据所有答案，最佳解决方案是编写特定的类并将其添加到每个自定义元素中。

.tst {
  display: block;
  background: yellow;
}

<tst-some-tag class="tst">一些内容</tst-some-tag>

- Bogdan Gishka