::ng-deep深度选择器的作用

在使用一些第三方的组件的时候，要修改组件的样式。
这种情况下使用:

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

这样的方式就可以方便的修改样式了。

比如领导嫌nz-timeline组件垂直距离太大，希望整个界面紧凑一点。我们就可以在使用了该组件的的组件中引入这样的CSS代码：

//修改ant-timeline-item之间的间距
 :host ::ng-deep .ant-timeline-item{padding: 0 0 8px;
 }
 //修改最后一个item与底部的间距。
 :host ::ng-deep .ant-timeline-item-last .ant-timeline-item-content{min-height: 10px;/* margin-bottom: -30px; */
 }

这样整个界面就短小精悍了许多。
:host 表示选择器，选择当前的组件。
::ng-deep 可以忽略中间className的嵌套层级关系。直接找到你要修改的className。
 

其实看一下VUE中的v-deep就知道怎么回事了，国内Angular资料那是真的少。

深度（穿透）选择器 ::v-deep /deep/ 及 ＞＞＞_俺是老王的博客-CSDN博客_v-deep在 vue 项目的开发过程，使用了 ElementUI 组件且样式 style 使用了 scoped 属性，当想要修改组件样式，发现直接修改不了，需去掉 scoped 属性或者使用深度选择器才能修改成功。去掉scoped的话又会影响全局样式，针对这种情况，可以使用深度作用选择器（即样式穿透）,最好使用深度选择器。本文对深度选择器做一个总结记录1、当项目中使用的 css 原生样式 ，需要使用 >>> 深度选择器来修改 外用第三方组件的样式