Angular特殊的选择器:host，:host-context，::ng-deep

:host 表示选择当前的组件。
::ng-deep 可以忽略中间className的嵌套层级关系。直接找到你要修改的className。
:host-context 如果需要满足某条件才能应用样式，这个正好。它在当前组件宿主元素的祖先节点中查找 CSS 类，直到文档的根节点为止。如果找到，才会应该后面的样式到内部元素。

常见用法举例：
1、在使用一些第三方的组件的时候，要修改组件的样式。或者是改变本组件下面某个特定类型的样式，不管目标的层次如何。

:host ::ng-deep .className{
    新的样式......
}

2、:host 选择是是把宿主元素作为目标的唯一方式。除此之外，你将没办法指定它， 因为宿主不是组件自身模板的一部分，而是父组件模板的一部分。

:host {
  display: block;
  border: 1px solid black;
}

3、如果h1标签在设计的组件中有一个黑色标题,我希望能够在黑暗的主题背景上显示时将其更改为白色。
如果无法访问源码，可以在父级的css中执行下面语句：

.theme-dark widget-box ::ng-deep h1 { color: white; }

也可以用:host-context在组件内部执行下面的语句：

 h1 
 {
     color: black;       // 默认颜色
     :host-context(.theme-dark) &
     {
         color: white;   // 当黑色主题时的颜色
     }
     // 或者设置属性 'outside' 为 [attr.theme]="'dark'"
     :host-context([theme='dark']) &
     {
         color: white;   // 当黑色主题时的颜色
     }
 }

4、搜索某类型下面的特定类型：

.card-container ::ng-deep .ant-tabs-card .ant-tabs-content {
     height: 120px;
     margin-top: -16px;
}

5、::ng-deep如果放在顶头，这种强烈不推荐，会污染全局样式。

::ng-deep .ant-tabs-card .ant-tabs-content {
     height: 120px;
     margin-top: -16px;
}

参考文章：
https://angular.cn/guide/component-styles#special-selectors
https://blog.csdn.net/yusirxiaer/article/details/113836099