Html 基于条件的CSS选择器

我试图得到一个CSS选择器来检查并应用CSS，条件是如果：sectionContent noToolbar可用，那么在SectionSeparator上应用高度：2em。是否可以使用一些选择器来实现这一点？我一直在寻找一个答案已经有很长一段时间了，没有任何运气。有什么建议吗

<section class="sec" name="Information">
    <div class="sectionContent-noToolbar"></div>
</section>
<div class="sectionSeparator"></div>

不，不是

如果是兄弟姐妹，则可以使用相邻兄弟姐妹组合器：

.sectionContent-noToolbar + .sectionSeperator {
    height: 2em;
}

---

…但是CSS没有允许您根据元素的同级子元素修改元素的功能

正如另一个答案所述，没有办法做到这一点。为了达到您希望达到的效果，您需要重新考虑您的实施。这是因为CSS的核心不是一种经过处理的语言，因此不能处理条件语句

---

在重新思考时，您可能会研究CSS预处理器，例如或，它们试图在CSS中实现逻辑结构。

CSS帮不了您。您可以使用javascript实现这一点，因为它可以在DOM中遍历。jQuery对于这项任务来说是相当整洁的。只需使用css选择器和遍历函数（如父节点、同级节点或子节点）选择所需的节点，然后手动修改找到的元素的样式。

css中不存在“可用”的常规条件。您无法使用css应用，因为还没有父选择器。同意，但是否有其他方法可以使用它。错误。。。这一切都意味着这是不可能实现的，也许你在构建网站时应该牢记这一点。CSS只向前和向下工作，没有其他方向。如果您向父级提供类sectionContent NOTOLBAR，则可以这样做。sectionContent NOTOLBAR+.sectionSeparator{}同级选择器ass和LESS在这里没有任何作用-它们受相同的规则约束，因为它们必须输出相同的语言：CSS。问题的标题是：基于条件的CSS选择器。SASS和LESS肯定能解决这个问题。@Joshua Cook:如果CSS不能充分解决这个问题，任何预处理器也不会，因为正如这里所说的，它们都可以归结为CSS。我怀疑它们不会产生任何效果，而是说它们不会产生任何影响，因为最终这取决于CSS的功能。这些条件与html无关，输出仍然是CSS，这不允许像这样进行条件选择：body.classExists？body.class{apply this；}:body.otherClass{apply other；}。SASS和更少的工作，但他们的最终结果就像手写的CSS。你的回答意味着你推荐的工具可以解决问题，但他们不能，所以你给了OP一个大的红鲱鱼。这只能通过使用不同的HTML或JavaScript更改DOM来实现。答案的其余部分也是错误的，类似的条件可以用CSS表示，这些条件不能涉及到回溯DOM树。具体来说，CSS中没有父选择器。至少对于选择器语法的典型解释是这样的。选择器-4使这在理论上成为可能，即使在该规范中也找不到父选择器，即指定父项而不是子项作为主题的子组合符的对应项。@somethinghere:主要是实现问题，这是。与级联无关，尽管在这一点上，我只是学究式的……BoltClock是对的，它与级联无关。它仅确定将哪些顺序规则应用于中的给定元素。实现问题首先是匹配元素的成本。事实上，尽管我开始认为试图解释在选择器的上下文中级联真正意味着什么，也就是说，没有什么是：