本篇文章帶大家深入了解一下angular中的幾個(gè)特殊選擇器:host、:host-context、::ng-deep，希望對大家有所幫助！
一、 :host
:host 表示選擇當(dāng)前的組件。
1.1 選擇宿主元素
使用 :host 偽類選擇器，用來選擇組件宿主元素中的元素（相對于組件模板內(nèi)部的元素），沒有子元素就相當(dāng)于選擇整個(gè)宿主元素。
如有下面html:
<app-detail></app-detail>
組件 app-detail 的樣式（整個(gè)app-detail 的樣式）如下 ：
:host {
display: inline-block;
background: red;
}瀏覽器 Elements 選擇 app-detail 元素， Style 如下：
[_nghost-wtd-c445] {
display: inline-block;
background-color: red;
}可以看得出來，:host 直接作用于宿主元素本身
1.2 選擇宿主元素的子元素
可以在 :host 后面添加選擇器以選擇子元素。例如：:host h1 定位組件視圖內(nèi)的 h1 標(biāo)簽
:host h1 {
color:red;
}1.3 有條件的選擇宿主元素
把宿主作為目標(biāo)，同時(shí)帶有 active 的 class 類的時(shí)候才會生效
:host(.active){
border-width: 3px;
}像這樣：
<app-detail class="active"></app-detail>
二、 ::ng-deep
::ng-deep 可以忽略中間 className 的嵌套層級關(guān)系。直接找到你要修改的 className。
在使用一些第三方的組件的時(shí)候，要修改組件的樣式,這種情況下使用.
2.1 從宿主元素到當(dāng)前元素再到 DOM 中的所有子 h3 元素，包括當(dāng)前組件中使用第三方組件的 h3 元素
:host ::ng-deep h3 {
font-style: italic;
}2.2 搜索某類型下面的特定類型
.card-container ::ng-deep .ant-tabs-card .ant-tabs-content {
height: 120px;
margin-top: -16px;
}三、 :host-context
如果需要滿足某條件才能應(yīng)用樣式。它在當(dāng)前組件
宿主元素的祖先節(jié)點(diǎn)中查找 CSS 類，直到文檔的根節(jié)點(diǎn)為止。如果找到，才會應(yīng)用后面的樣式到本組件內(nèi)部元素。
3.1 選擇組件宿主元素中的元素
:host-context {
color:red;
}3.2 把宿主作為目標(biāo)，同時(shí)帶有active的class類的時(shí)候才會生效
在下面的例子中，只有當(dāng)某個(gè)祖先元素(宿主元素也可以)有 CSS 類 theme-light 時(shí)，才會把 background-color 樣式應(yīng)用到本組件內(nèi)部的所有 <h2> 元素中。
:host-context(.theme-light) h2 {
background-color: #eef;
}3.3 可以在:host-context后面添加選擇器以選擇子元素
例如：:host-context h1 定位組件視圖內(nèi)的 h1 標(biāo)簽
:host-context h1{
color: hotpink;
}3.4 可用于某個(gè)樣式內(nèi)部條件判斷
h1{
color: hotpink;
:host-context(.active) &{
color: yellow;
}
}
