我可以在ViewChildren中使用html标记作为选择器吗

Question

我要使模板中的所有<p>都具有font-variant small-caps。我可以将html传递给ViewChildren吗？我看到了传递模板引用变量或组件的示例，但没有看到传递给ViewChildren的选择器是html标记或css类的示例。有人可以举个例子吗？

template: `<p>
  I am a static component
</p>
<p>
I am another para but I have an id (template reference variable) #pref. I got my blue color using ViewChild and Renderer2
</p>
<p>
  All paragraphs are small-caps because using ViewChildren and Renderer2, the style was set to bold
  </p>`

.ts文件

import { Component,ViewChild, ViewChildren, QueryList,ElementRef,Renderer2,OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular';
  @ViewChildren("p") paraList:QueryList<any>; /*I SUPPOSE I CANT DO THIS AS P IS INTERPRETED AS TEMPLATE REFERENCE VARIABLE AND NOT <P>*/
  constructor(private renderer:Renderer2){

  }

  ngAfterViewInit(){ //QueryList becomes available now
    this.paraList.forEach(para =>{this.renderer.addClass(para,'boldClass')})
  }

}

css

.boldClass{
  font-variant: small-caps;
}