Angular中如何在HTML模板中访问嵌套CSS类

首先你需要先明确CSS嵌套的生效规则，以及Angular类绑定的语法限制：

• 不管是原生CSS嵌套还是Sass/LESS等预处理器的嵌套，你当前写的.class1内部直接嵌套.class2的代码，最终生效的选择器是 .class1 .class2 （后代选择器，匹配class1元素内部携带class2的子元素）。如果你想要匹配同时携带class1和class2的同一个元素，嵌套写法需要改为&.class2，编译后才会生成.class1.class2的选择器。
• Angular内置的[class.xxx]语法仅支持绑定单个类名，xxx位置不能携带点符号，所以你写的[class.class1.class2]是无效语法。

根据你的使用场景，对应解决方案如下：

场景1：需要给同一个元素同时加class1和class2 #

可以选以下任意一种写法：

1. 分开写两个单类绑定

<div [class.class1]="show === false" [class.class2]="show === false">

2. 用ngClass对象语法更简洁

<div [ngClass]="{
  'class1': show === false,
  'class2': show === false
}">

场景2：嵌套样式是后代选择器（class2写在class1内部，仅对class1的子元素生效） #

父元素绑定class1，子元素正常加class2即可：

<div [class.class1]="show === false">
  <div class="class2">子元素内容会匹配嵌套样式</div>
</div>

内容的提问来源于stack exchange，提问作者WebDeveloper21