我有一个父组件：
<parent></parent>
并且我想填充这个组与子组件：
<parent> <child></child> <child></child> <child></child> </parent>
父模板：
<div class="parent"> <!-- Children goes here --> <ng-content></ng-content> </div>
儿童模板：
<div class="child">Test</div>
由于父和子是两个独立的组件，它们的样式被锁定到自己的范围。
在我的父组件中我尝试：
.parent .child {
// Styles for child
}
但是.child样式不会应用于子组件。
我试图使用styleUrls将父的样式表包含到子组件中以解决范围问题：
// child.component.ts styleUrls: [ './parent.component.css','./child.component.css',]
但这没有帮助，也尝试了另一种方式通过获取子样式表到父，但是没有帮助。
那么如何对包含在父组件中的子组件进行样式化？
解决方法
您可以使用封装模式和/或穿透CSS组合器>>>，/ deep /和:: shadow
工作示例：http://plnkr.co/edit/1RBDGQ?p=preview
styles: [
`
:host { color: red; }
:host >>> parent {
color:blue;
}
:host >>> child{
color:orange;
}
:host >>> child.class1 {
color:yellow;
}
:host >>> child.class2{
color:pink;
}
`
],template: `
Angular2 //red
<parent> //blue
<child></child> //orange
<child class="class1"></child> //yellow
<child class="class2"></child> //pink
</parent>
`