css - 在 CSS 中选择动态元素名称

Question

如何设置一组共享相同后缀的自定义 HTML 标签(Angular.js 指令)的样式？

如果需要三个样式相同的模态标签

1. <a-modal>
2. <b-modal>
3. <c-modal>

如何创建一个适用于所有三个的选择器而不让它们共享一个公共(public)属性？

// doesn't work
[*-modal] {
  //style...
}

// would've worked with attributes:
div[modal="true"] {
  //style...
}

Answer 1

如果你正在使用 Angular 指令，那么你可以使用类名而不是标签名来匹配你的指令以及通配符 CSS 选择器:

HTML

<div class="a-modal"></div>

CSS

[class*="-modal"] {}

Angular

restrict: 'C'

---

但是，我建议只为它们引入一个通用的 CSS 类。