How can I make it so only this `mat-card-subtitle` in this above header gets color red?

问题

I learn Angular material and I have this code

  <mat-card-header>
    <mat-card-title>Search for books</mat-card-title>
    <mat-card-subtitle>press enter on search</mat-card-subtitle>
  </mat-card-header>

and this css

.mat-card-subtitle {
  font-size: 10px;
  color: red;
}

The problem is now all <mat-card-subtitle> gets the color red. How can I make it so only the mat-card-subtitle in this above header gets color red?

回答1:

Add a custom CSS class in HTML

  <mat-card-header>
    <mat-card-title>Search for books</mat-card-title>
    <mat-card-subtitle class="red-text">press enter on search</mat-card-subtitle>
  </mat-card-header>

CSS

.red-text {
  font-size: 10px;
  color: red !important;
  text-align: center !important;
}

回答2:

Add a class to the mat-card-subtitle and give color to particular class

.classname{color:red}

来源：https://stackoverflow.com/questions/56734689/how-can-i-make-it-so-only-this-mat-card-subtitle-in-this-above-header-gets-col