少数直系孩子

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

使用LESS，&将被整个包装选择器替换。

这意味着

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

变为

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

由于您希望使代码更简洁，您应该注意>组合子不是可选的，但&变得多余。编写此选择器的适当方法是：

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

反过来产生＆＃39;

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