所有以标签开头的标签

Question

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

例如：

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

<tst-some-tag>Some content</tst-some-tag>

我之所以需要这样的选择器，是因为我使用的是Angular并且拥有大量的自定义组件。所有这些都应显示为block。为所有自定义元素指定display属性可能会非常舒服，而不是每次使用时都添加类。

Answer 1

如果您想按类名选择元素，可以执行以下操作：[class^='class']

如果您想通过ID 选择元素，只需执行以下操作： [id^='id']

在这两种情况下，您都可以选择开始所有元素，并在单引号之间添加文字，可以是按类名或按ID。

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

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');

Answer 3

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

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

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