这是因为默认情况下组件具有视图封装（shadow dom）。要禁用此行为，您可以利用encapsulation属性，如下所述：

import {Component, ViewEncapsulation} from '@angular/core';
import {TestApp} from 'testapp.component.ts';
@Component({
  selector:'test-component',
  styleUrls: ['test.component.css'],
  templateUrl: './test.component.html',
  directives:[TestApp],
  encapsulation: ViewEncapsulation.None // <------
})
export class TestComponent{

}

看看这个plunkr：http://plnkr.co/edit/qkhkfxPjgKus4WM9j9qg?p=preview。

当使用styleUrls属性时，样式是一个组件的 * 本地 *，而不是其子组件的。所以我做了两个更改：1）将styleUrls移动到testapp组件。2）将div移动到testapp组件。

import {Component} from '@angular/core';
@Component({
 selector:'testapp',
 styleUrls: ['./test.component.css'],
 template: `
 <div class="test">
  <a href="https://www.google.com">Google</a>
 </div>

 `

})
export class TestApp{

}

编辑：这应该解决：
在css的子类中写下面的代码

:host.parentclass childclass{

}

parentclass是child的直接父类。childclass是应用于子组件的类。

只需将父组件样式添加到子组件样式url数组中，并确保您给予了父css url的正确路径。
请参阅下面的代码以供参考。
//在子组件@component中：

@component({
 styleUrls: ['./../parent.component.css', './child.component.css'],
})

我已经解决了这样的问题，根据情况覆盖了不适用于::ng-deep{}或:host::ng-deep{}的样式：

::ng-deep{
   // your styles
}

或者

:host ::ng-deep {
    // your styles
}