更少的嵌套元素

Question

我知道

div {
  a {
    ...
  }
}

在 LESS 中将代表

div a {
  ...
}

在 CSS 中。问题是什么是 LESS 代码：

div > a {
  ...
}

?

Answer 1

你可以简单地使用

div {
  > a{
    color: blue;
  }
}

或者

div {
  & > a{ /* & represents the current selector parent, so will be replaced with div in this case in the output */
    color: blue;
  }
}

两者都具有相同的效果，并将产生以下编译输出。

div > a {
  color: blue;
}

注意：您也可以对+(相邻同级组合器) 和~(通用同级组合器)遵循相同的方法。