使用LESS将样式应用于子元素

Question

这有效：

.layoutList {
    background-color: #CFCFCF;
}
.layoutList > .entityCard.hover {
    background-color: #FFFFFF;
    border: 1px solid yellow;
}

为什么这与上面的代码不一样？在LESS中“级联”这个的适当方法是什么，以便所有内容都在主.layoutList {}部分下？

.layoutList {
    background-color: #CFCFCF;
    .entityCard.hover {
        background-color: #FFFFFF;
        border: 1px solid yellow;
    }
}

Answer 1

你对LESS的所作所为应该有效。它编译成这个CSS：

.layoutList {
  background-color: #CFCFCF;
}
.layoutList .entityCard.hover {
  background-color: #FFFFFF;
  border: 1px solid yellow;
}

唯一缺少的是，如果你想要儿童组合器 如你的示例所示，那么你需要调整你的LESS（>被添加）：

.layoutList {
    background-color: #CFCFCF;
    > .entityCard.hover {
        background-color: #FFFFFF;
        border: 1px solid yellow;
    }
}

然后输出：

.layoutList {
  background-color: #CFCFCF;
}
.layoutList > .entityCard.hover {
  background-color: #FFFFFF;
  border: 1px solid yellow;
}