css - 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。但是编译使这个输出:

.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) 中有一个空格，所以只有第一个 child 是工作正常。

如何删除这个空格？

Answer 1

你的问题是你只使用 LESS's immediate parent selector (&)在第一个 :nth-child 声明上，而不是在其他两个声明上。很明显，如果我们在每个声明之间添加换行符:

&: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 {
        ...
    }
}