css - 更少的嵌套元素

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

注意:您也可以对 + (相邻同级组合器)和 ~ (一般同级组合器)采用相同的方法。