直接子选择器

是否存在在其输出中应用直接子选择器(>)的 LESS？

在我的 style. less 中，我想写下这样的内容:

.panel {
...
> .control {
...
}
}

产生的结果如下:

.panel > .control { ... }

85979 次浏览

小开

最佳答案

更新

实际上，原始问题中的代码工作得很好。您可以只使用 >子选择器。

找到答案了。

.panel {
...
>.control {
...
}
}

注意“ >”和“ .”之间缺少空格，否则它不会工作。

小开

官方说法:

.panel {
& > .control {
...
}
}

&始终引用当前选择器。

小开

另外，如果您的目标是第一个子元素，比如 <tr>的第一个 <td>，您可以使用如下代码:

tr {
& > td:first-child {font-weight:bold;}
}

这有助于减少不需要的类声明。

小开

正确的语法应该遵循，而使用’&’在这里是多余的。

.panel{
> .control{
}
}

根据 less guidelines，‘ &’用于参数化祖先(但这里没有这种需要)。在这个例子中，盘旋比 校对: hover重要，否则会导致句法错误。但是，在这里使用’&’并没有这样的语法要求。否则，所有嵌套都需要’&’，因为它们本质上是指父级。

小开

如果需要针对更多的选择器:

.parent {
>.first-child,
>.second-child,
>.third-child {
...
}
}