Question

我目前有这个lees代码：

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

如何删除此空格？

Answer 1

您的问题是，您在第一个:nth-child声明中仅使用LESS's immediate parent selector (&)而在另外两个声明中不使用{{3}}。很明显，如果我们在每个声明之间放置一个换行符：

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

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

我目前有这个lees代码：

1 个答案: