基于条件的 CSS 选择器答案

【问题标题】：CSS selector based on a condition基于条件的 CSS 选择器
【发布时间】：2015-12-17 07:16:16
【问题描述】：

我正在尝试让 CSS 选择器根据以下条件检查和应用 CSS：如果：sectionContent-noToolbar 可用，则在 sectionSeperator 上应用 height:2em。是否可以使用一些选择器来实现这一点？我一直在寻找答案很长一段时间没有任何运气。有什么建议吗？

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

【问题讨论】：

CSS 中不存在一般“可用”条件。
由于还没有父选择器，因此无法使用 CSS 应用。
同意，但有其他方法可以实现。
Err... 这一切都意味着这是无法实现的，也许您在构建网站时应该牢记这一点。 CSS 只能向前和向下工作，没有其他方向。
如果你提供类 sectionContent-noToolbar 给父级，你可以做 .sectionContent-noToolbar + .sectionSeparator{} （兄弟选择器）

【解决方案1】：

不，不是。

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

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

……但是 CSS 没有任何东西可以让你根据它的兄弟后代来修改元素。

【讨论】：

具体来说，CSS中没有父选择器。
至少对于选择器语法的典型解释。 selectors-4 在理论上使这成为可能，即使在该规范中也找不到“父选择器”（具体而言，指定父而不是子作为主题的子组合器的对应物）。
@somethinghere：主要是实现问题，即still in full force today。与级联无关（尽管那时我只是迂腐......）。
BoltClock 是对的，与级联无关。这只是确定哪些 order 规则应用于给定元素。实现问题首先是匹配元素的成本。
确实——尽管我开始认为试图解释级联在选择器上下文中的真正含义（也就是说，什么都没有）是an exercise in futility :(

【解决方案2】：

CSS 帮不了你。您可以使用 javascript 来实现这一点，因为它可以在 DOM 中遍历。 jQuery 非常适合这项任务。只需使用 css 选择器和遍历函数（如 parents、siblings 或 children`）选择您想要的节点，然后手动修改找到的元素的样式。

【讨论】：

【解决方案3】：

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

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

【讨论】：

SASS 和 LESS 在这里不起作用 - 它们受相同的规则约束，因为它们必须输出相同的语言：CSS。
问题的标题是：“CSS selector based on a condition”。 SASS 和 LESS 肯定会解决这个问题。
@Joshua Cook：如果 CSS 不能充分解决问题，那么任何预处理器都不会，因为正如这里所说的那样，无论如何它们都归结为 CSS。我怀疑他们的意思不是“他们不会有任何影响”，而是说“他们不会有任何影响”，因为最终这取决于 CSS 的功能。
这些条件与您的 html unrelated 并且 output 仍然是 CSS，它不允许像这样的伪条件选择：@ 987654323@。 SASS 和 LESS 可以工作，但它们的最终结果就像手写 CSS。
您的回答暗示您推荐的工具可以解决问题，但它们不能，所以您只是给了 OP 一个大红鲱鱼。这只能通过更改 DOM（使用不同的 HTML 或 JavaScript）来完成。（你的答案的其余部分也是错误的，类似的条件可以用 CSS 表示，条件不能涉及回溯 DOM 树）。