:host,:host(),:host-context选择器有什么区别

时间:2018-07-13 13:47:16

标签: css angular angular5

我正在从其样式文件中对角度组件进行样式设置,发现必须使用:host,:host():host-context 选择器,它们之间有什么区别?

2 个答案:

答案 0 :(得分:5)

:主机

是用于样式化宿主组件的语法。

:host(.element)

是一个实验性CSS伪类函数,它选择the shadow host of the shadow DOM containing the CSS it is used insideReference

:主机上下文

是用于在当前元素之外的任何地方设置特定类样式的语法。该类必须已经应用于当前元素范围之外的元素。

可以在this blog post中找到有关Angular应用程序上下文的更多深入信息。

答案 1 :(得分:1)

根据我的观察,:host 为组件应用样式,:host(.class) 为组件应用样式,如果组件具有指定的类。:host-context(.class) 为组件应用样式,如果宿主组件为组件具有指定的类,如果组件具有也计数的类。

简而言之,:host-context 似乎对条件进行了深入搜索。