使用LESS将样式应用于子元素 [英] Apply style to child elements with LESS

问题描述

这有效:

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

为什么这与上面的代码不一样?在LESS中级联"此内容以使所有内容都位于主.layoutList {}部分下的合适方法是什么?

Why doesn't this work the same as the above code? What is the appropriate way to "cascade" this in LESS so that everything is under the main .layoutList {} section?

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

推荐答案

您为LESS所拥有的东西应该可以工作.编译为以下CSS:

What you have for your LESS should work. It compiles to this CSS:

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

缺少的唯一一件事是，如示例所示，如果您想要子组合器 ，则需要对此进行调整(在其中添加了> ):

.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;
}

这篇关于使用LESS将样式应用于子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！