Angular 父组件中修改子组件样式

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xiaoxiong_jiaxin/article/details/83307932

情景：父组件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;