CSS LESS 中的直接子选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8110286/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Immediate Child selector in LESS
提问by Dave
Is there anyway to have LESS apply the immediate child selector ( > ) in its output?
无论如何让 LESS 在其输出中应用直接子选择器（ > ）？
In my style.less, I want to write something like:
在我的 style.less 中，我想写一些类似的东西：
.panel {
...
> .control {
...
}
}
and have LESS generate something like:
并让 LESS 生成如下内容：
.panel > .control { ... }
回答by Dave
UPDATE
更新
Actually, the code in the original question works fine. You can just stick with the >child selector.
实际上，原始问题中的代码工作正常。您可以坚持使用>子选择器。
Found the answer.
找到了答案。
.panel {
...
>.control {
...
}
}
Note the lack of space between ">" and ".", otherwise it won't work.
注意“>”和“.”之间缺少空格，否则将不起作用。
回答by Ricardo Tomasi
The official way:
官方方式：
.panel {
& > .control {
...
}
}
&always refers to the current selector.
&总是指当前的选择器。
See http://lesscss.org/features/#features-overview-feature-nested-rules
请参阅http://lesscss.org/features/#features-overview-feature-nested-rules
回答by sbharti
The correct syntax would be following while using '&' would be redundant here.
使用“&”时将遵循正确的语法在这里是多余的。
.panel{
> .control{
}
}
According to less guidelines, '&' is used to parameterize ancestors (but there is no such need here). In this less example, &:hoveris essential over :hoverotherwise it would result in syntactic error. However, there is no such syntactic requirement for using '&' here. Otherwise all nestings would require '&' as they are essentially referring to parent.
根据less 指南， '&' 用于参数化祖先（但这里没有这样的需要）。在这个例子少，：悬停是必不可少的了：悬停否则会导致语法错误。但是，在这里使用“&”没有这样的语法要求。否则所有嵌套都需要“&”，因为它们本质上是指父级。
回答by seth yount
Also, If you are targeting the first child element, such as the first <td>of a <tr>, you could use something like this:
此外，如果您的目标是第一个子元素，例如<td>a的第一个<tr>，则可以使用以下内容：
tr {
& > td:first-child {font-weight:bold;}
}
this helps reduce class declarations when they aren't needed.
这有助于减少不需要的类声明。
