Css 直接子选择器

在输出中是否有较少的直接子选择器（>）应用

以我的风格，我想写一些类似于：

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

.panel > .control { ... }

并生成以下内容：

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

.panel > .control { ... }

---

更新

实际上，原始问题中的代码运行良好。您只需使用

>

子选择器即可

---

找到了答案

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

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

官方方式：

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

&

始终指向当前选择器

---

另请参见

，如果您以第一个子元素为目标，例如

的第一个子元素，则可以使用如下内容：

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

---

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

正确的语法如下，而使用“&”在这里是多余的

.panel{
   > .control{
   }
}

---

根据本文，使用“&”来参数化祖先（但这里没有这种需要）。在中，&:hover是必不可少的over:hover，否则将导致语法错误。然而，在这里使用“&”并没有这样的语法要求。否则，所有嵌套都需要“&”，因为它们本质上是指父项。

如果您需要针对更多选择器：

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

---

除非有明确的文档记录，否则如果不使用空格，我不会怀疑这是一个bug。这只是在愚弄解析器。它将其视为一个选择器，因此您可以获得

.panel>.control

。我将其视为一个功能，而不是一个bug。当您以这种方式使用它时，与“&”相反，它更加一致。我认为如果只对伪类而不是子类使用“&”，代码会更清晰。这是CSS的一个特性，它同时接受

div>p

和

div>p

。一致性将始终使用选择器之间的空格（查看生成的CSS）。当然，但我更关心的是使用的一致性&。有趣的是，您问题中的片段已经是正确答案了。@thirtydot当然，除了它不起作用之外。。。如果不删除空格或添加“&”，则不会。我正在使用更少的.js。不能肯定其他的解析器。我刚刚测试了它，你的问题中的原始代码在less.js中可以工作。你自己看看：是的，我很抱歉，它就像一个魅力的空间+1给你。我不知道昨天怎么好几个小时都没用。。。否则我就不会发布这个问题了。我认为这也是在愚弄解析器（就像你对另一个答案的感觉一样）。让我解释一下。如您所说，&始终指当前（父）选择器。因此，无论之后发生了什么，都应该适用于父母。这就是伪类的作用。直接子类更接近****gasp****子类，而不是伪类。所以使用just>更直观、更符合逻辑。您认为什么更正确

div>p

或

div>p

？

&

组合器是一种标准的方法，它可以用更少的时间完成，而不是我的感觉。你的解释是重复的。有些人在一行中编写CSS…大多数人使用更少的CSS，因此他们不必关心生成的实际CSS。无论如何，结果证明，在>之后可以使用空格。所以&纯粹是多余的。@JJF没有问题，因为它是一个答案？