Question

我有一个Angular 6应用程序，并且我在一个页面上有一个mat-card，其中包含一个包含3列的mat-grid-list。

在mat-grid-list中，我有3个空的span，以显示一个彩色的彩色正方形，最后带有一个标签。

我已经创建了CSS，并在我的HTML文件中对其进行了引用，但它似乎只对我的第一个span和我的第一个CSS

有效

CSS

.complaintSquare {
    background-color: #ffb2b2;
};

.enquirySquare {
    background-color: red;
};

.otherSquare {
    background-color: green;
};

HTML

<mat-card>
  <mat-card-title class="thirdCard">Notes</mat-card-title>
  <mat-card-content>
    <mat-grid-list cols="3">
      <span>
        <span class="complaintSquare"> &nbsp;  &nbsp; </span>
          &nbsp;Complaint
      </span>
      <span>
        <span class="enquirySquare"> &nbsp;  &nbsp; </span>
        &nbsp;Enquiry
      </span>
      <span>            
        <span class="otherSquare"> &nbsp;  &nbsp; </span>
        &nbsp;Other
      </span>
    </mat-grid-list>

Answer 1

问题在于，您所有的CSS类末尾都带有分号（;）-

您的CSS应该看起来像这样-

.complaintSquare {
    background-color: #ffb2b2;
}

.enquirySquare {
    background-color: red;
}

.otherSquare {
    background-color: green;
}

<mat-card>
  <mat-card-title class="thirdCard">Notes</mat-card-title>
  <mat-card-content>
    <mat-grid-list cols="3">
      <span>
        <span class="complaintSquare"> &nbsp;  &nbsp; </span>
          &nbsp;Complaint
      </span>
      <span>
        <span class="enquirySquare"> &nbsp;  &nbsp; </span>
        &nbsp;Enquiry
      </span>
      <span>            
        <span class="otherSquare"> &nbsp;  &nbsp; </span>
        &nbsp;Other
      </span>
    </mat-grid-list>

Angular CSS未应用于“ mat-grid-list”

1 个答案: