使用 ::ng-deep 选择器时如何通过 Id 为元素应用样式答案

【问题标题】：How to apply style by Id for element when using ::ng-deep selector使用 ::ng-deep 选择器时如何通过 Id 为元素应用样式
【发布时间】：2020-10-08 14:44:31
【问题描述】：

我有两个checkbox 和angular-material。我想使用 ::ng-deep 选择器为 checkbox 应用不同的样式。

这是我的代码

<section class="example-section">
<mat-checkbox id=" #matCh" class="example-margin" [(ngModel)]="checked">Checked</mat-checkbox>
<mat-checkbox id=" #matCh2"  class="example-margin" [(ngModel)]="indeterminate">Indeterminate</mat-checkbox>
</section>

这就是风格

<style id="matCh">
 ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background,.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: red;
  } 
  
 ::ng-deep
   .mat-checkbox-background,.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: red;
  }
</style>


<style id="matCh2">
  ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background,.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
     background-color: green;
   } 
   
  ::ng-deep
    .mat-checkbox-background,.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
     background-color:green;
   }
 </style>

我也试过这种方式，但只显示green颜色

<style>
 #matCh ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background,.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: red;
  } 
  
 #matCh ::ng-deep
   .mat-checkbox-background,.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: red;
  }
</style>

它总是显示green 两种颜色checkbox 而不是red。我该如何解决这个问题

【问题讨论】：

我注意到在您的<mat-checkbox id=" #matCh" 中# 之前有一个空格。您不必在您的 ID 中输入#。 # 被 css 选择器用来引用 html 元素的 ID。所以你可能想试试：<mat-checkbox id="matCh" ........ 和 <mat-checkbox id="matCh2" ........ 另外，我只是想知道你是如何将样式放入其中的。它是在单独的类中还是内联在 .ts 文件中？

标签： css angular angular-material css-selectors

【解决方案1】：

堆栈闪电战：https://stackblitz.com/edit/angular-xxgcrb?file=src/app/checkbox-configurable-example.css

你必须使用不同的css类来识别。为什么总是在你的中获得绿色，因为最后一个 css 由于两个复选框中都缺少唯一标识符而覆盖了一个以上的 css。

html：

<section class="example-section">
<mat-checkbox id="#matCh"   class="example-margin firstone" [(ngModel)]="checked">Checked</mat-checkbox>
<mat-checkbox id="#matCh2"    class="example-margin secondone" [(ngModel)]="indeterminate">Indeterminate</mat-checkbox>
</section>

css：

::ng-deep .firstone.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.firstone.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: red;
}
::ng-deep .firstone .mat-checkbox-background,
.firstone.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: red;
}
::ng-deep .secondone.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: green;
}
::ng-deep .secondone .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: green;
}

即使您可以使用id 作为唯一标识符，如上述评论中所述。删除 id 和 # 中的空格并使用 like ：

::ng-deep #matCh.mat-checkbox-checked.mat-accent .mat-checkbox-background,
#matCh.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: red;
}
::ng-deep #matCh .mat-checkbox-background,
#matCh.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: red;
}
::ng-deep #matCh2.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: green;
}
::ng-deep #matCh2 .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: green;
}

【讨论】：