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

【问题标题】：Why CSS direct descendant selector is not applied on Angular component为什么 CSS 直接后代选择器不适用于 Angular 组件
【发布时间】：2018-05-02 19:06:45
【问题描述】：

我们有这个简单的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> 的直接子代没有这个样式。

这里有什么问题？

【问题讨论】：

所有后代都是直接的，> 符号是子组合器（在选择器和组合器分开之前，以前称为子选择器）
在浏览器中打开开发者工具。查看元素面板。查看<component> 元素。查看样式选项卡。样式是按照那个应用的吗？它被什么东西覆盖了吗？它是否已应用但不可见（例如，因为它没有可见的高度）？ <component> 真的是 <main-content> 的孩子吗？
对于您必须使用的样式：host /deep/ 将样式应用于嵌套组件
未应用任何样式。

标签： html css angular

【解决方案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;
}

【讨论】：