所有以开头的标签答案

【问题标题】：All tags that start with所有以开头的标签
【发布时间】：2017-04-08 16:07:02
【问题描述】：

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

例如：

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

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

我想要这样的选择器的原因是因为我使用的是 Angular 并且有很多自定义组件。所有这些都应显示为block。为所有自定义元素指定display 属性可能会很舒服，而不是每次使用它们时都添加类。

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

【解决方案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');

【讨论】：

这不是一个选项，因为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' ) )

【解决方案3】：

如果你想按类名选择元素，你可以这样做：[class^='class']

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

在这两种情况下，您都选择 start 与您放在单引号之间的文本的所有元素，可以按类名或按 id。

也可能有变化： div[class^='class'] 或 div[id^='id']

【讨论】：