设'parent'是父类的类名，'child'是子类的类名

.parent .child{
//css definition for child inside parent components
} 

你可以使用这个格式来定义父组件中的子组件的CSS格式

更新3:

::ng-deep也已弃用，这意味着您不应该再这样做了。当你需要从父组件重写子组件的样式时，不清楚这会如何影响这些事情。对我来说，如果这被完全删除，这似乎很奇怪，因为这将如何影响你需要在库组件中覆盖样式的库?

如果你对此有任何见解，请评论。

更新2:

因为/deep/和所有其他阴影穿刺选择器现在已弃用。Angular放弃了::ng-deep，应该使用它来实现更广泛的兼容性。

更新:

如果使用Angular-CLI，你需要使用/deep/而不是>>>，否则它将无法工作。

原:

在Angular2的Github页面上随机搜索“style”后，我发现了这个问题:Angular2 - innerHTML样式

上面说要使用2.0.0 beta版中添加的一些东西。10、>>>和::shadow选择器。

(>>>)(和等价的/deep/)和::shadow在2.0.0-beta.10中添加。它们类似于shadow DOM CSS组合子(已弃用)，并且只适用于封装:ViewEncapsulation。在Angular2中是默认的。它们也可能与ViewEncapsulation一起工作。没有but，然后只是忽略，因为他们是不必要的。在支持更高级的跨组件样式化特性之前，这些组合子只是一种中间解决方案。

所以简单地做:

:host >>> .child {}

在父样式表文件解决了这个问题。请注意，如上面的引用中所述，在支持更高级的跨组件样式之前，此解决方案只是中间的。

可悲的是/deep/选择器已弃用(至少在Chrome中) https://www.chromestatus.com/features/6750456638341120

简而言之，(目前)似乎没有长期的解决方案，除了以某种方式让你的子组件动态地设置样式。 你可以传递一个样式对象给你的孩子，并通过以下方式应用它: < div [attr.style] = " styleobject " > 或者如果你有一个特定的风格，你可以使用像这样的东西: < div [style.background-color] = " colorvar " >

更多与此相关的讨论: https://github.com/angular/angular/issues/6511

你不应该使用::ng-deep，它已被弃用。在Angular中，从父组件中改变子组件样式的正确方法是使用封装(阅读下面的警告以了解其含义):

import { ViewEncapsulation } from '@angular/core';

@Component({
    ....
    encapsulation: ViewEncapsulation.None
})

然后，你就可以修改组件的css，而不需要使用::ng-deep

.mat-sort-header-container {
  display: flex;
  justify-content: center;
}

警告:这样做将使您为该组件编写的所有css规则都是全局的。

为了将你的css的范围限制在这个组件和他的子组件上，在你的组件的顶部标签上添加一个css类，并把你的css“放在”这个标签里:

模板:

<div class='my-component'>
  <child-component class="first">First</child>
</div>,

Scss文件:

.my-component {
  // All your css goes in there in order not to be global
}

简单的回答是，你根本不应该这么做。它破坏了组件封装，破坏了从自包含组件中获得的好处。考虑将道具标志传递给子组件，然后它可以自行决定如何以不同的方式呈现或应用不同的CSS，如果需要的话。

<parent>
  <child [foo]="bar"></child>
</parent>

Angular不赞成所有影响父样式的子样式的方法。

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

我希望通过以下方式实现这一目标:

使用@Component将css类添加到宿主元素，并将封装设置为none。然后在组件style.css.scss中引用添加到宿主的类，这将允许我们声明只影响我们自己和我们类范围内的子类的样式。初版

@Component({
  selector: 'my-component',
  templateUrl: './my-component.page.html',
  styleUrls: ['./my-component.page.scss'],
  host: {
    class: 'my-component-class'
  },
  encapsulation: ViewEncapsulation.None
})

结合下面的CSS (my-component.page.scss)

// refer ourselves so we are allowed to overwrite children but not global styles
.my-component-class {
  // will effect direct h1 nodes within template and all h1 elements within child components of the 
  h1 {
    color: red;
  }
}
// without class "scope" will affect all h1 elements globally
h1 {
  color: blue;
}