:nth-child(even) не работает Angular компонентах

Question

Имею компоненты ангуляр

<app-list-items>
   <app-item></app-item>
   <app-item></app-item>
   <app-item></app-item>
   <app-item></app-item>
</app-list-items>

Шаблон для компонент примитивный

list-items.component.html

<div>
    <ng-content select="app-item"></ng-content>
</div>

item.component.html

<p class="test">hell WORLD!!!!!</p>

list-items.component.css

 p:nth-child(even) {
    background-color: black;
    color:floralwhite;
 }

 p:nth-child(odd) {
    background-color:floralwhite;
    color: red;
 }
 p {
   border-top: 1px solid black;
 }

 p:first-child{
   border-top: none;
 }

Ну и по итогу наблюдаю что контекст для разметки компонента локализуется и он все теги p считает первыми и единственными. Как заставить работать селекторы first-child|last-child, nth-child()?

Answer 1

Вы можете отключить инкапсуляцию стилей, добавив ViewEncapsulation.None в родительском компоненте:

@Component({
  selector: "app-list-items",
  styleUrls: ["list-items.component.css"],
  templateUrl: "list-items.component.html",
  encapsulation: ViewEncapsulation.None
})
export class ListItems {
...
}

И тогда стили можно прописывать для дочерних компонентов, но стили начинать надо с родительского селектора

app-list-items p {
  border-top: 1px solid black;
}

Или же, вы можете не отключать инкапсуляцию стилей, а просто добавить эти стили в глобальную таблицу styles.css

БЛОГ НА HUSL

:nth-child(even) не работает Angular компонентах

Ответы (1 шт):