html - 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" />

并定位类(class)；

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

你可以用 attribute selectors 做一些奇特的事情，但对于您的用例，上述两种解决方案最合适。

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