Css 替代子零部件中的父零部件样式

我有一个父组件

Parent.html

，它有

CSS

样式，如下所示

.style1{
color:red
}
.style2{
color:red
}

我在

child.html

中重用这个组件。现在，我想覆盖子组件中的父组件样式。 我尝试使用

：：ng deep

它正在工作，但如果加载

父组件

，它在父组件中反映的子组件中的样式覆盖是什么

---

我只想覆盖子组件中的样式，但不应反映在父组件中。如何做到这一点？

为此，您需要在父级中使用

封装：视图封装。无

，然后您可以通过添加更具体的选择器来添加覆盖，如在子组件中-

child-component .style1{
   color:red
}

child-component .style2{
   color:red
}

---

我认为你必须有两个组件与2个独立的目录，它应该有html，ts，css文件

因此，在父组件的html中，您将引用子组件-
parent.component.html

->

在子组件中，您应该有-child.component.html、child.component.ts、child.component.css文件。
如果您在child.component.css中创建并添加任何类似的样式，如parent.component.css文件，那么这些样式将添加到每个组件中，如

p[random\u atttr\u value]

，因此现在您将在child中为p创建单独的样式

这是角度封装的默认行为，即视图封装。由angular-like shadow DOM技术使用，并非所有broswers都支持该技术，但angular就是这样做的。
换句话说，它向浏览器上呈现的每个组件添加一些属性。
视图封装有3个选项-

encapsulation: ViewEncapsulation.None, 
           ViewEncapsulation.Emulated, (-- this is default)
           ViewEncapsulation.Native (-- only applies to browsers with shadow DOM technology)<br>

封装：视图封装。无，
ViewEncapsulation.Emulated，（-这是默认值）
ViewEncapsulation.Native（--仅适用于使用阴影DOM技术的浏览器）

---

希望这能帮助您解决问题。

您能给出一些实例吗？我正在

路由器出口中使用此父组件，如果我使用
封装：视图封装。无
则不采用其他样式。这里我只希望覆盖选定的样式，而不是所有样式您可以利用
ngStyle
和
Input
覆盖特定属性。演示链接也会更新。请检查相同的链接。如果我写样式类，它不接受，如果我写内联样式，它接受