少多个直系子节点

Question

预期的 CSS：

.parent > .type1 {
    color: red;
}
.parent > .type2 {
    color: red;
}
.parent > .type3 {
    color: red;
}

原来的少：

.parent {
    & > .type1, & > .type2, & > .type3 {
        color: red;
    }
}

如何组合type1/type2/type3？这不起作用，因为 type2/type3 将被编译为后代，而不是直接子代：

.parent {
    & > .type1, .type2, .type3 {
        color: red;
    }
}

Answer 1

少， &将替换为整个包装选择器。

这意味着

.parent {
  & > .type1, .type2, .type3 {...}
}

变成

.parent > .type1, .type2, .type3 {...}

当你想让你的代码更简洁时，你应该注意>组合器不是可选的，而是&变得多余的。编写此选择器的适当方法是：

.parent {
  > .type1,
  > .type2,
  > .type3 {...}
}

反过来产生'

.parent > .type1,
.parent > .type2,
.parent > .type3 {...}