CSS - 使用通配符定位自定义标记？

Question

在我的Angular应用程序中，我有<app-page-home>，<app-page-login>，<app-page-documentation>等组件页面，这些页面在我的<router-outlet>中需要时安装。

我试图将所有这些组件从一个全局样式表（./src/styles.styl一起应用于应用程序中的任何地方），但CSS似乎不接受自定义标记的通配符。

我希望避免逐个列出我的代码，而是app-page-* { border : blue solid 1px; }

app-page-* {
   border : blue solid 1px;
}

<app-page-login>Login stuff</app-page-login>
<br>
<app-page-documentation>Documentation</app-page-documentation>

我无法添加类（或者我可以吗？）因为这些组件是由路由器动态安装的，否则我显然可以使用像class="page"这样的东西。

知道如何使用通配符定位自定义标签吗？感谢

Answer 1

这是正确的，css没有部分类型通配符。最简单的解决方案是将它们组合在一起，就像这样;

app-page-login, app-page-documentation { border: 1px solid blue; }

或者向他们申请课程;

<app-page-login class="app-page" />
<app-page-documentation class="app-page" />

并定位课程;

.app-page { border: 1px solid blue; }

你可以使用attribute selectors做一些奇特的东西，但是根据你的用例，上面的两个解决方案是最合适的。

- 编辑;我看到你不能添加课程。然后使用第一个解决方案。