SCSS中:host::ng-deep .class与.class :host::ng-deep的区别及示例

这俩都是Angular里用来突破组件样式隔离的写法，但作用范围和目标逻辑完全不一样，我拆解开给你讲：

1. :host::ng-deep .content-body：从组件宿主出发，穿透作用所有后代.content-body #

这个选择器的执行顺序是：

• :host：先定位到当前组件的宿主元素（就是你在父组件里写的<app-your-component>标签）
• ::ng-deep：打破Angular的组件样式隔离规则，让后续选择器能钻进子组件内部
• .content-body：匹配当前宿主元素下所有层级的.content-body元素——不管是当前组件模板里的，还是嵌套的子组件模板里的

直白点说：只要是当前组件树（自身+所有子组件）里的.content-body，都会被这个样式命中。

2. .content-body :host::ng-deep：仅作用于被包裹在.content-body中的当前组件实例 #

这个选择器的逻辑完全反过来：

• .content-body：先找到页面中所有的.content-body容器
• :host：在这些容器内部，定位到当前组件的宿主元素（也就是那些被放在.content-body里的<app-your-component>实例）
• ::ng-deep：再把样式穿透到这些宿主元素的所有后代（包括子组件内部）

简单讲：只有当你的组件被父组件放在.content-body里面时，该组件实例的所有后代才会应用这个样式；如果组件实例不在.content-body里，完全不会受影响。

示例1： :host::ng-deep .content-body 的效果 #

假设我们有ParentComponent和ChildComponent两个组件：

ParentComponent 模板 #

<div class="content-body">
  <p>父组件的.content-body内容</p>
  <app-child></app-child>
</div>

ChildComponent 模板 #

<div class="content-body">
  <p>子组件的.content-body内容</p>
</div>

ParentComponent 的 SCSS #

:host::ng-deep .content-body {
  color: red;
  font-weight: bold;
}

效果：父组件和子组件里的.content-body内的文字都会变成红色加粗——样式成功穿透到了子组件内部。

示例2：.content-body :host::ng-deep 的效果 #

父组件模板 #

<!-- 第一个子组件实例放在.content-body里 -->
<div class="content-body">
  <app-child></app-child>
</div>

<!-- 第二个子组件实例不在.content-body里 -->
<div>
  <app-child></app-child>
</div>

ChildComponent 的 SCSS #

.content-body :host::ng-deep p {
  color: blue;
  font-style: italic;
}

效果：只有第一个被.content-body包裹的<app-child>实例里的<p>会变成蓝色斜体；第二个<app-child>里的文字完全不受影响。

官方已经标记::ng-deep为废弃（deprecated）了，更推荐用ViewEncapsulation.None、组件样式继承或者CSS变量来处理跨组件样式需求。如果非要用::ng-deep，记得搭配:host使用，避免污染全局样式。

内容的提问来源于stack exchange，提问作者Jeyabalan Thavamani