如何从父组件中设置递归嵌套子组件的样式

Question

这是我的父组件html

<div class="col-md-6">
          <div class="categories">
            <div class="title">All Categories</div>
            <nested-cat [data]="data" [key]="key" (action)="onClicked($event)" class="cat-container"></nested-cat>
          </div>
      </div>
    </div>

这是我的子组件html

<ul class="categorys" *ngIf="items.length">
  <li class="cat"  *ngFor="let item of items">
    <div class="content">
      <span class="name">{{item.name}}</span>
      <span class="action">
          <button md-icon-button><md-icon color="primary" (click)="hello('hello')">edit</md-icon></button>
          <button md-icon-button><md-icon color="warn">delete</md-icon></button>
      </span>
    </div>
    <nested-cat *ngIf="item[key].length" [key]="key" [data]="item[key]" (action)="onClicked($event)"></nested-cat>
  </li>
</ul>

我正在关注this和this个链接，发现:host(selector)和:host-context(selector)用于定位父级和子级组件。但我无法弄清楚如何在我的情况下实施。

我已将这些css用于父级：

:host ::ng-deep nested-cat{
    width: 100%;
    padding:0;
  }

工作正常，但是当我尝试定位第一个ul元素时，样式将应用于所有ul元素。

:host(nested-cat) ::ng-deep ul:first-of-type{
    padding:0;//this will apply to all ul 
}

我如何定位第一个嵌套猫的第一个孩子（即ul）并将填充设置为0？

更新：

这是一个plunkr https://plnkr.co/edit/fU0WLIwh9V6Euoz43hvS?p=preview

最后这是有效的：

  :host ::ng-deep .categories>nested-cat>ul{
      padding: 0 4px;
  }

Answer 1

这个选择器应该起到作用，至少对于这个特定的例子：

.bg > nested-cat > ul {
    padding-left: 0;
}

其中>是直接子选择器。它只选择直接子节点的匹配元素，而不选择树下面的任何后代。

Answer 2

这将解决：

:host ::ng-deep .content{
  width: 100%;
  margin-left:-40px
}

DEMO