Angular 如何从该组件的CSS文件中确定角度组件的样式？

我希望能够以实际组件为目标，以便对其进行样式设置。我这样说并不是说我想针对组件内部的元素，而是组件本身

例如，如果我运行ng g c nav，这将创建一个名为nav的新组件，我在模板中使用它

我希望能够从上述命令创建的nav.component.css文件中设置实际元素的样式

到目前为止，我一直在做的是在我创建的每个组件中放置一个元素，然后保存组件的样式。但我知道这是不对的，我想把它做好

我可以通过转到父组件并通过父组件的css文件或通过styles.css全局文件选择它来设置组件的样式。不过，我更希望能够从nav的css文件中执行此操作。我原以为：主机选择器会允许我这样做，但事实并非如此

更新：这就是我的项目的样子

App.component.html

<nav></nav>

<router-outlet></router-outlet>

这就是：host伪选择器的创建目的

导航组件CSS内部：

：主持人{ 边框：1px纯黑； }

---

有两种方法可用于更改零部件样式，一种是从零部件样式文件更改零部件样式

:host {
  width : 100%;
  display: block;
  border: 1px solid #ccc;
  padding: 0.25rem;
}

全局样式文件的另一种方式，但在这里需要使用组件标记选择器

nav {
  color: orange;
  display: inline-block;
  border: 1px dashed;
  margin: 0.5rem 0;
  padding: 0.25rem;
  opacity: 0.75;
}

---

demo所有自定义元素（如app nav）都有display:inline作为标准，这会导致各种问题

因此，您应该始终将display:block添加到所有组件中，使它们的行为更像div

---

我认为这是您的主要问题。

主机选择器是正确的选择方式。“你为什么说它不起作用？”莱昂纳德利，因为我有：主持人{宽度：100%；高度：50px；背景色：红色；在我的nav.component.css文件中，它不会产生任何更改我已经用我的项目结构更新了op不要混淆只有后者是组件的选择器，第一个是原生htmlelement@devnull69好的，我已经将导航更改为应用导航，但是现在我的元素有一个siz0x0的e和：主机仍然不工作。好的，我现在读了你的最后一行…但这是它应该如何工作的。所以问题一定在其他地方

nav {
  color: orange;
  display: inline-block;
  border: 1px dashed;
  margin: 0.5rem 0;
  padding: 0.25rem;
  opacity: 0.75;
}