为什么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>具有此样式，但<component>的直接子节点<main-content>没有此样式。

这里有什么问题？

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;
}