為什么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>沒有這種樣式。

怎么了

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的子sidebar而是同級元素 。

我建議你試試

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

甚至

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