почему css не применяется к тегу p при использовании вложенных компонентов?

Question

Подскажите, пожалуйста, почему css не применяется к тегу p?У меня есть вложенные компоненты. Теперь я хочу добавить CSS во внутренний элемент компонента. Но свойство цвета не применяется, почему ??Вот мой код

.a p {
  color: blue;
}

.a .test{
  color: blue;
}

https://stackblitz.com/edit/angular-f99kxh?file=src%2Fapp%2Fhello.css

Answer 1

Вы можете использовать :: ng-deep , чтобы получить доступ к внутренним элементам.

.a ::ng-deep p {
  color: green !important;
}

обновленный блик стека

Answer 2

Компоненты CSS будут применены к представлению HTML.Следовательно, вы должны написать css в файле css компонентов.

abc.ts

 @Component({
  selector: 'abc',
  template: `<p class="test">abc</p>`,
  styleUrls: ['./abc.css']
})

в abc.css добавить свой css.

Iнадеюсь, это поможет вам!

Answer 3

Это происходит из-за угловых значений css encapsulation , которые связывают css с областью действия компонента, к которому он присоединен, а не разрешают его каскадное поведение по умолчанию.

Вы можете просто создатьглобальный css-файл, который не зависит от компонента и импортируйте его в ваш index.html или отключите его вообще.