为什么CSS直接后代选择器不适用于Angular组件

Question

我们有这个简单的 main.html 文件。

<app>
   <sidebar></sidebar>
   <main-content>
      <router-outlet></router-outlet>
   </main-content>
</app>

当我们通过路由（URL更改）加载一个简单的组件时，HTML变为：

<app>
   <sidebar></sidebar>
   <main-content>
      <router-outlet></router-outlet>
      <component></component>
   </main-content>
</app>

第一个问题是为什么 <component> 没有嵌套在 <router-outlet> 内部，而是成为兄弟元素。

然而，这个 CSS 样式并没有应用在 <component> 标签上：

app sidebar main-content > * {
   background: red;
}

当我们检查时，<router-outlet> 具有这种样式，但是直接位于 <main-content> 下的 <component> 没有这种样式。

这里出了什么问题？

- Sajad Sedghizadeh

---

所有的后代都是直接的，> 符号是 子组合器（在选择器和组合器分离之前曾被称为 子选择器）。 - Quentin

打开您浏览器中的开发者工具。查看元素面板。查看<component>元素。查看样式选项卡。该样式是否按照预期应用？是否被其他内容覆盖？是否已应用但不可见（例如，因为没有高度而无法显示）？<component>是否真的是<main-content>的子级？ - Quentin

请使用:host /deep/样式将样式应用于嵌套组件。 - Fateh Mohamed

No style is applied. - Sajad Sedghizadeh

Answer 1

基于你所提供的代码：

<app>
   <sidebar></sidebar>
   <main-content>
      <router-outlet></router-outlet>
      <component></component>
   </main-content>
</app>

这个。

app sidebar main-content > * {
   background: red;
}

这样做不会起作用，因为main-content不是sidebar的子元素，而是一个同级元素。

我建议您尝试

app sidebar + main-content > * {
   background: red;
}

甚至连

也不会

app main-content > * {
   background: red;
}

- Paulie_D