質問

親コンポーネントがあるんだけど

<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 が2つの別々のコンポーネントである場合、それらのスタイルはそれぞれのスコープにロックされます。

親コンポーネントでは、こうしてみました。

.parent .child {
  // Styles for child
}

しかし .child のスタイルが適用されません。 child コンポーネントを使用します。

を使ってみました。 styleUrls をインクルードするために parent のスタイルシートを child コンポーネントを使用することで、スコープの問題を解決することができます。

// child.component.ts
styleUrls: [
  './parent.component.css',
  './child.component.css',
]

しかし、これは役に立ちませんでした。また、他の方法で child スタイルシートを parent が、これもダメでした。

では、親コンポーネントに含まれる子コンポーネントは、どのようにスタイルを設定するのでしょうか？

解決方法は？

アップデート - 最新の方法

避けられるなら、やらないでください。Devon Sansがコメントで指摘しているように。この機能は、おそらく廃止されるでしょう。

最終更新日

から アンギュラー4.3.0 から現在（Angular 12.x）まで、すべてのピアスCSSコンビネータは非推奨とされました。Angularチームは新しいコンビネーターを導入した。 ::ng-deep は、以下のようになります。

DEMO : https://plnkr.co/edit/RBJIszu14o4svHLQt563?p=preview

styles: [
    `
     :host { color: red; }
     
     :host ::ng-deep parent {
       color:blue;
     }
     :host ::ng-deep child{
       color:orange;
     }
     :host ::ng-deep child.class1 {
       color:yellow;
     }
     :host ::ng-deep child.class2{
       color:pink;
     }
    `
],



template: `
      Angular2                                //red
      <parent>                                //blue
          <child></child>                     //orange
          <child class="class1"></child>      //yellow
          <child class="class2"></child>      //pink
      </parent>      
    `

旧来の方法

を使用することができます。 encapsulation mode および piercing CSS combinators >>>, /deep/ and ::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>      
`