CSS中的积极前瞻答案

【问题标题】：positive lookahead in cssCSS中的积极前瞻
【发布时间】：2012-06-02 19:28:38
【问题描述】：

我知道在 Perl 正则表达式中，正前瞻的概念，即q(?=u) 匹配一个 q 后跟一个 u，而不使 u 成为匹配项的一部分。我在 css 中寻找类似的东西：我想匹配一个div，然后是一个兄弟div.specialClass。

<div>..</div>  <!-- div to match -->
<div class="specialClass">..</div>

我玩过 + 但它与 div.specialClass 匹配，而我想要前面的 div。

【问题讨论】：

标签： css regex

【解决方案1】：

您还不能声明选择器的哪一部分是主题。主题始终是 CSS 中选择器的最后一个元素，直到我们能够移动它，可能使用 $ 或 ! 语法。

// Always selects the .specialClass div which follows another div
div + div.specialClass {
    color: red;
}

将来，您将能够将第一个 div 设为主题，可能使用以下语法：

// Selects any `div` preceding any `div.specialClass`
$div + div.specialClass { // or maybe div! + div.specialClass
    color: red;
}

您在此期间唯一的解决方法是使用 JavaScript。像 jQuery 这样的工具会让这变得非常简单：

$("div + div.specialClass").prev();

现在是对紧接在任何 div.specialClass 之前的所有 div 元素的引用。

【讨论】：

酷，这有 RFC 吗？
@Jonathan Sampson 感谢您的回答。是否还有机会为正则表达式语法投票/提议：`div ?= div.specialClass？（我喜欢正则表达式）
@drjerry 我敢肯定你可以向 W3C 表达你的想法，但我认为他们更有可能选择$，因为这似乎是当前 Level 工作草案中的标准4 个选择器。
@Jonathan Sampson 我会休息的。重新考虑 $ 作为焦点选择器/操作符可能更直观。
@drjerry $ 尚未确定。还有!，将跟随主题。我不确定最终会是什么。

【解决方案2】：

现在不是很有帮助，但是，

将来我们可以使用 CSS4 选择器 :has() 来解决这个问题。

div:has(+div.specialClass)

【讨论】：