logo标签列表

LESS中的直接子选择器

csscss-selectorsless
123

有没有办法使 LESS 应用直接子选择器（ > ）在它的输出中？

在我的 style.less 文件中，我想写类似这样的内容：

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

并让LESS生成类似于以下内容：

.panel > .control { ... }
https://dev59.com/WVvUa4cB1Zd3GeqPxtwQ - thirtydot
19
有趣的是，你提问中的片段已经是正确答案了。 - thirtydot
@thirtydot 当然，除非你删掉空格或者加上“&”，否则它是不起作用的。我正在使用less.js。不能确定其他解析器是否有这个问题。 - Dave
2
我刚刚测试了一下，你问题中的原始代码在less.js中确实可以工作。你可以自己看看：http://jsfiddle.net/thirtydot/vcE8t/ - thirtydot
1
是的，非常抱歉，加上空格后它就像魔法般地运行了。+1 给你。我不知道昨天为什么它对我不起作用了几个小时...否则我就不会发帖问问题了。 - Dave
5个回答
156

更新

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

找到答案了。

.panel {
    ...
    >.control {
        ...
    }
}
请注意">"和"."之间的空格缺失，否则它将无法工作。
5
如果加了一个空格后它不起作用的话，我会认为这是一个错误，除非有特别的文件记录。请注意，我的翻译并没有改变原意，只是更加通俗易懂。 - BoltClock
这只是愚弄解析器。它将其视为单个选择器，因此您会得到 .panel > .control。 - Ricardo Tomasi
我认为这是一种特性而不是错误。如果你使用这种方式而不是"&"，它会更加一致。我认为如果只在伪类中使用"&"而不是子类，代码会更清晰。 - Dave
1
这是CSS的一个特性，它接受div > p和div>p两种选择器。保持一致性总是使用选择器之间的空格（查看生成的CSS）。 - Ricardo Tomasi
当然可以，不过我更关心使用 & 的一致性。 - Dave
能否将 > 放在 .panel 后面？ - hellouworld
80
1
我认为这也只是在愚弄解析器（就像你对其他答案的感觉一样）。让我解释一下。就像你说的，&始终指向当前（父）选择器。因此，无论它后面是什么，都应该应用于父级。而这正是伪类的作用。直接子类更接近于哇子类，而不是伪类。因此，仅使用>更直观和合乎逻辑。 - Dave
6
你认为哪个更正确？div > p 还是 div >p？在 LESS 中，&组合器是其规范的方式，而不是我个人的感觉。你的解释是修辞的。一些人会将他们的 CSS 写在同一行中... - Ricardo Tomasi
大多数人使用LESS，因此他们不必关心生成的实际CSS。无论如何，事实证明，可以在>之后使用空格。因此，&是纯粹多余的。 - Dave
14

在这里使用 '&' 是多余的，正确的语法应该是以下形式。

.panel{
   > .control{
   }
}
根据less 指南，'&' 用于给祖先赋参（但这里没有这种需要）。在这个 less 示例中，&:hover比:hover更为重要，否则会导致语法错误。然而，在这里使用 '&' 没有此类语法要求。否则，所有嵌套都需要 '&'，因为它们实质上是指父级。
1
@JJF没有问题，因为它是一个答案？ - Bill Woodger
1
如果您需要针对更多选择器进行目标定位：
.parent {
    >.first-child,
    >.second-child,
    >.third-child {
    ...
    }
}
-1

另外，如果你想要选中第一个子元素，例如一个 <tr> 中的第一个 <td>，你可以使用类似下面这样的代码：

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

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接