LESS 中的直接子选择器答案

【问题标题】：Immediate Child selector in LESSLESS 中的直接子选择器
【发布时间】：2011-12-27 23:01:06
【问题描述】：

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

在我的 style.less 中，我想写这样的东西：

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

并让 LESS 生成如下内容：

.panel > .control { ... }

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

使用 '&' 时遵循的正确语法在这里是多余的。

.panel{
   > .control{
   }
}

根据less guidelines，'&'用于参数化祖先（但这里没有这个必要）。在this less example 中，&:hover 比 :hover 更重要，否则会导致语法错误。但是，在这里使用 '&' 没有这样的语法要求。否则所有嵌套都需要'&'，因为它们本质上是指父级。

【讨论】：

【解决方案3】：

官方方式：

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

& 始终引用当前选择器。

【讨论】：

我认为这也只是在愚弄解析器（就像您对其他答案的感觉一样）。让我解释。就像你说的， & 总是指当前（父）选择器。所以无论后面的内容应该应用到父级。而且，这就是伪类的作用。直接子类更接近 ****gasp**** 子类而不是伪类。所以只使用 > 更加直观和合乎逻辑。
你认为哪个更正确？ div > p 还是 div >p？ & 组合器是 LESS 中的规范方式，而不是我的感受。你的解释是反讽。有些人将他们的 CSS 写在一行中......
大多数人使用 LESS，因此他们不必关心生成的实际 CSS。无论如何，事实证明>之后可以使用空格。所以 & 纯粹是多余的。

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

更新

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

找到答案了。

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

注意“>”和“.”之间没有空格，否则不起作用。

【讨论】：