LESS中的直接子选择器

Question

无论如何都没有在其输出中应用直接子选择器（＆gt;）？

在我的风格中，我想写一些类似的东西：

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

并且LESS生成类似于：

的内容

.panel > .control { ... }

Answer 1

<强>更新

实际上，原始问题中的代码运行正常。您可以坚持使用>子选择器。

---

找到答案。

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

请注意“＆gt;”之间缺少空格和“。”，否则它将无效。

Answer 2

官方方式：

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

&始终引用当前选择器。

请参阅http://lesscss.org/features/#features-overview-feature-nested-rules

Answer 3

使用＆＃39;＆amp;＆＃39;时会遵循正确的语法。这里多余。

.panel{
   > .control{
   }
}

根据less guidelines，＆＃39;＆amp;＆＃39;用于参数化祖先（但这里没有这样的需要）。在this less example中，＆amp;：hover 对：hover 至关重要，否则会导致语法错误。但是，使用＆＃39;＆amp;＆＃39;没有这样的语法要求。这里。否则所有的嵌套都需要＆＃39;＆amp;＆＃39;因为它们实质上是指父母。

Answer 4

如果您需要定位更多选择器：

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

Answer 5

另外，如果您要定位第一个子元素，例如<td>的第一个<tr>，则可以使用以下内容：

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

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