基于条件的CSS选择器

Question

我正在尝试使用CSS选择器来检查并应用CSS，条件是：sectionContent-noToolbar可用，然后在height:2em上应用sectionSeperator。是否有可能使用某些选择器来实现？我一直在寻找一个答案，现在没有任何运气。有什么建议吗？

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

Answer 1

不，不是。

如果他们是兄弟姐妹，那么你可以使用相邻的兄弟组合器：

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

...但CSS没有任何东西可以让你根据兄弟姐妹的后代修改一个元素。

Answer 2

CSS无法帮助你。您可以使用javascript实现此功能，因为它可以在DOM中进行遍历。 jQuery非常适合这项任务。只需使用css选择器和遍历函数（如parents，siblings或children`）选择所需的节点，然后手动修改找到的元素样式。

Answer 3

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

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