Question

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

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

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

Answer 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之前的所有div.specialClass元素。

Answer 2

现在不是很有帮助，但是

将来，我们可以使用CSS4选择器 :has() ，将来会对此有所帮助。

div:has(+div.specialClass)