html - 为什么 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> 中, 并成为 sibling 。

但是，此 CSS 未应用于 <component>标签:

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

当我们检查时，<router-outlet>有这种风格，但是<component>这是<main-content>的直系 child 没有这种风格。

这里有什么问题吗？

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