另一個角度組件的第一個子組件的CSS選擇器

Question

在Angular中，我需要使用一些CSS（Sass）規則選擇父組件的第一個子組件。我有一個組件的項目列表，然後我有列表項目，它們本身就是組件。因此，它的結構類似於：

<product-list> 
    <list-item /> 
    <list-item /> 
    <list-item /> 
</product-list> 

每個組件的CSS規則被隔離到只有分量，所以我不能夠使用第一子選擇器選擇第一個列表項。

由於產品列表Sass文件中的規則不適用於其子代，並且列表項Sass文件中的規則不適用於其父母，因此我不能使用產品列表：first-孩子在兩個Sass文件中的任一個中，因爲任何文件都需要引用列表父項和列表子項。

其中之一，我想知道這個CSS規則隔離被稱爲。這是一個很好的功能，但它阻止了我在這裏。

我可以在全球SASS中編寫規則，但這似乎並不是最好的方法。

有人可以告訴我真正的Angular方式嗎？

Answer 1

有你的旅途https://plnkr.co/edit/FPqx6m12tkmMFlf5LvJl?p=preview

@Component({ 
    selector: "my-li", 
    styles:[` 
    :host { 
     color:blue 

    } 

    `] 
    template: ` 
     <li>This is my li</li> 
    ` 
}) 
export class MyLi { 

} 


@Component({ 
    selector: "navbar", 
    directives: [NgFor,MyLi], 
    styles: [` 
     my-li:nth-child(2){ 
      color: yellow; 
     } 
    `], 
    template: ` 
     <h2>Democratic Party presidential candidates</h2> 
     <ul> 
      <my-li *ngFor="#item of items; #i = index">{{item}} {{i}}</my-li> 
     </ul> 
    ` 
}) 
export class Navbar { 
    items: Array<String> 

    constructor() { 
     this.items = [ 
     "Hillary Clinton", 
     "Martin O'Malley", 
     "Bernie Sanders" 
     ] 
    } 

} 

注：這是使用舊版本Angular2的，在新版本中沒有指示數組中的@Component，所以不要混淆，只是看看樣式。