LESS 在第 n 个子选择器上添加一个空格

Question

我目前有这个酒糟代码：

.myclass{
    display:inline-block;
    overflow: auto;
    & li{
        display: none;
        &:nth-child(1),:nth-child(2),:nth-child(3){
            display:inline-block;
        }
    }
}

如您所见，我想要的是只显示前三个 li 元素，其余的将显示为 none。但是编译使这个 Output:

.myclass{
    display:inline-block;
    overflow: auto;
}
.myclass li{
    display: none;
}
.myclass li:nth-child(1),
.myclass li :nth-child(2),
.myclass li :nth-child(3) {
    display: inline-block;
}

如您所见，:nth-child(2) 和 :nth-child(3) 中有一个空格，因此 只有第一个子项可以正常工作。

如何删除这个空格？

Answer 1

这里的问题是您只在第一个 :nth-child 声明中使用了 LESS's immediate parent selector (&) 而在其他两个声明中没有使用。很明显，如果我们在每个声明之间放置一个换行符：

&:nth-child(1),
:nth-child(2),
:nth-child(3){
    display:inline-block;
}

要解决此问题，您只需将 & 放在其他两个 :nth-child 声明之前：

&:nth-child(1),
&:nth-child(2),
&:nth-child(3){
    display:inline-block;
}

此外，您不需要 li 选择器前的 &：

.myclass {
    li {
        ...
    }
}

Answer 2

为了能够做到这一点，你可以制作一个重复的结构

.myclass{
  display:inline-block;
  overflow: auto;
  & li{
      display: none;
      /* In range() pass as an argument the number of iterations you need to perform */
      each(range(3), {
        /* And to the argument of nth-child() you pass the value (the current iteration number) */
        &:nth-child(@{value}) {
          display:inline-block;
        } 
      }) 
  }
}

输出：

.myclass {
  display: inline-block;
  overflow: auto;
}
.myclass li {
  display: none;
}
.myclass li:nth-child(1) {
  display: inline-block;
}
.myclass li:nth-child(2) {
  display: inline-block;
}
.myclass li:nth-child(3) {
  display: inline-block;
}

有关更多信息，我推荐文档：https://lesscss.org/functions/#list-functions-each

LESS 在第 n 个子选择器上添加一个空格

LESS add a whitespace on nth-child selector

css

whitespace

css-selectors

less

我目前有这个酒糟代码：