Sass 层次结构和多个元素

Question

我正在使用 angular，我想更新材料单选按钮并仅检查类中的那些，我需要包含在 styles.scss 中，因为这个_ngcontent angular 包含，所以我有：

.class1 
mat-radio-button,
mat-select,
mat-checkbox {
color: red;
line-height: 36px;
box-sizing: border-box;
}

据我了解，这应该适用于具有 class1 的父级中包含的那些 mat-radio-button、mat-select 和 mat-checkbox。

但不知何故，它也适用于没有"class1 父级"的其他项目，我认为是我在 css 选择器上做得不好，我想要：

all mat-radio-button, mat-select or mat-checkbox with a parent with class class1

如何创建此 css 选择器？

Answer 1

你的 SCSS 是錯誤的：

.class1 {
mat-radio-button,
mat-select,
mat-checkbox {
color: red;
line-height: 36px;
box-sizing: border-box;
}
}

你拥有它的方式只适用于.class1 mat-radio-button，但不适用于mat-select或mat-checkbox.

查看 SCSS 指南中的嵌套部分。