情景：父元件FatherComponent中使用了子元件ChildComponent，父元件有自己的css檔案，子元件也有自己的css檔案，在父元件中修改了子元件的樣式，但不起作用。

檢視HTML元素的樣式表，發現 定義的樣式後面都加了個 _ngcontent-c#，這是Angular為了區分自己的樣式，特意加的標記。

使用特殊選擇器：元件樣式中有一些從影子 DOM 樣式範圍 (Shadow DOM style scoping) 領域引入的特殊選擇器：

CSS偽類---與自定義元素相關的偽類：
:defined：匹配任何已定義的元素，包括內建元素和定義的自定義元素CustomElementRegistry.define()。
:host：選擇包含其內部使用的CSS 的shadow DOM的影子主機。
:host()：選擇包含其內部使用的CSS 的陰影DOM的陰影主機（因此您可以從其陰影DOM中選擇自定義元素） - 但僅當作為函式引數給出的選擇器與陰影主機匹配時。
:host-context()：選擇包含其內部使用的CSS 的影子DOM的影子主機（因此您可以從其影子DOM中選擇一個自定義元素） - 但僅當作為函式引數給出的選擇器與影子主機的祖先匹配時它位於DOM層次結構中的位置。
 

/***FatherComponent.html***/
<div class="father">
  <child-detail></child-detail>
</div>

/***ChildComponent.html***/
<div class="child-name">showChildName</div>

/***ChildComponent.css***/
.child-name{color:pink;font-size:12px}

/***FatherComponent.css***/
.father .child-name{color:red;font-size:16px;}

這個時候渲染出的showChildName的樣式：pink & 12px;
 

/***ChildComponent.css***/
.child-name{color:pink;font-size:12px}
:host-context(.father) .child-name{color:red;font-size:16px;}

/***FatherComponent.css***/
不寫樣式

這個時候渲染出的showChildName的樣式：red & 16px;

/***ChildComponent.css***/
.child-name{color:pink;font-size:12px}

/***FatherComponent.css***/
:host{color:red;font-size:16px;}


這個時候渲染出的showChildName的樣式：red & 16px;