所有以app-前缀开头的元素的CSS选择器

Question

我试图在Angular应用程序中定位所有以应用程序为前缀的元素。有人知道SCSS或香草CSS中的方法可以以此方式定位元素吗？

请不要使用像[class^="app-"]这样的类或属性定位，我们正试图避免添加它们。

Answer 1

没有这样的CSS选择器。如您所建议，您只能使用属性选择器和^=来做到这一点。

一种替代方法是使用JavaScript：

const components = Array.prototype.filter.call(
  document.querySelectorAll('*'),
  e => e.tagName.toLowerCase().startsWith('app-')
)

您现在可以轻松进行{​​{1}}，然后从CSS进行components.forEach(cmp => cmp.classList.add('__angular-component'))或其他任何操作。

Answer 2

到目前为止，我知道css中没有解决方案，但是在sass中，您可以使用list存储组件名称并循环抛出该列表并创建所需的选择器。

  

但是通过这种方式，您必须手动添加组件名称

$component-list : 'home','admin' , 'other';
$prefix : 'app';


@each $c in $component-list {
  #{$prefix}-#{$c}{
   color:red;
  }
}

stackblitz demo