LESS中的直接子选择器

112

无论如何，LESS是否在其输出中应用直接子选择器（>）？

以我的style.less，我想写一些类似的东西：

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

并让LESS生成如下内容：

.panel > .control { ... }

css css-selectors less

— 戴夫
source

stackoverflow.com/questions/7634932/less-js-strong-nested-rules

— 三十点

15

有趣的是，您所提问题的摘录已经是正确的答案。

— 2011年

@thirtydot当然，除了它不起作用外，如果您不删除空格或添加“＆”则不会。我正在使用less.js。不能肯定地说其他解析器。

— 戴夫

2

我已经测试过了，您问题的原始代码确实可以在less.js中使用。自己看看：jsfiddle.net/thirtydot/vcE8t

— 2011年

1

是的，我很抱歉，它就像空间的魅力一样。为您+1。我不知道昨天怎么对我不起作用……否则我就不会发布这个问题。

— 戴夫

144

更新

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

找到了答案。

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

请注意“>”和“。”之间缺少空格，否则它将无法正常工作。

— 戴夫
source

4

我不会怀疑，如果它没有与那里的空间一起使用，那是一个错误，除非有专门的文档。

— BoltClock

这只是在欺骗解析器。它将其视为单个选择器，因此得到.panel >.control。

— 里卡多·托马西

我将其视为功能而非错误。当您以这种方式使用它而不是使用“＆”时，它更加一致。我认为，如果仅对伪类使用“＆”，而不对子类使用“＆”，则代码更清晰。

— 戴夫

1

这是CSS的功能，它接受div > p和div>p。一致性将始终在选择器之间使用空格（看一下生成的CSS）。

— 里卡多·托马西

可以，但是我更关心使用＆的一致性。

— 戴夫

78

官方方式：

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

& 始终引用当前选择器。

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

— 里卡多·托马西（Ricardo Tomasi）
source

1

我认为这也只是在欺骗解析器（就像您对另一个答案一样）。让我解释。就像您说的那样，＆总是指当前（父）选择器。因此，无论其适用于父母之后。而且，这是伪类的角色。直属子类更接近``gasp ****''子类，而不是伪类。因此，仅使用>会更加直观和逻辑。

— 戴夫

6

您认为更正确的是什么？div > p还是div >p？该&组合子是规范的方式做到这一点的少，不我的感受。您的解释是真实的。有些人在一行中编写CSS ...

— Ricardo Tomasi

大多数人都使用LESS，因此他们不必关心所生成的实际CSS。无论如何，事实证明>之后可以使用空格。所以＆纯粹是多余的。

— 戴夫

13

使用'＆'时将遵循正确的语法，此处将多余。

.panel{
   > .control{
   }
}

根据较少的指导原则，“＆”用于参数化祖先（但这里没有这样的需要）。在这个较少的示例中，＆：hover比：hover必不可少，否则将导致语法错误。但是，这里没有使用'＆'的语法要求。否则，所有嵌套都需要'＆'，因为它们实际上是指父级。

— 斯巴蒂
source

1

@JJF没问题，因为这是答案吗？

— 比尔·伍德格

0

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

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

— stojsins
source

-1

此外，如果你的目标的第一个子元素，如第一<td>的<tr>，你可以使用这样的事情：

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

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

— 塞思·扬特
source