CSS :host /deep/ 选择器是什么意思？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46914414/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What does :host /deep/ selector mean?
提问by Pismotality
Please explain in a straightforward way what :host /deep/means:
请以直截了当的方式解释什么:host /deep/意思：
:host /deep/ .ui-autocomplete {
width: 85%;
}
回答by Martin Adámek
It is used to allow styling child components when using emulatedview encapsulation.
它用于在使用emulated视图封装时允许设置子组件的样式。
More about this can be found here:
可以在此处找到有关此内容的更多信息：
https://angular.io/guide/component-styles
https://angular.io/guide/component-styles
Btw /deep/selector is now deprecated:
顺便说一句/deep/，现在不推荐使用选择器：
The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.
不推荐使用阴影穿透后代组合器，并且正在从主要浏览器和工具中删除支持。因此，我们计划放弃对 Angular 的支持（对于 /deep/、>>> 和 ::ng-deep 中的所有 3 个）。在那之前 ::ng-deep 应该是首选，因为它与工具更广泛地兼容。
:hostis used to address the hosting element - that is the one that you use to add the component somewhere (e.g. <app-component>).
:host用于解决托管元素 - 这是您用来在某处添加组件的元素（例如<app-component>）。
Use the :host pseudo-class selector to target styles in the element that hosts the component (as opposed to targeting elements inside the component's template).
使用 :host 伪类选择器来定位托管组件的元素中的样式（而不是定位组件模板内的元素）。
So the selector :host /deep/ .ui-autocompletemeans "on current hosting element, go deep (search in child components too) and look for elements with class ui-autocomplete.
所以选择器的:host /deep/ .ui-autocomplete意思是“在当前的宿主元素上，深入（也在子组件中搜索）并寻找带有 class 的元素ui-autocomplete。
Here is some additional information about the view encapsulation feature:
以下是有关视图封装功能的一些附加信息：
https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html
https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html
