css - CSS中的积极前瞻

Question

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

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

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

score 10 · Accepted Answer

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

// 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紧接在 any 之前的所有元素的引用div.specialClass。

score 0 · Accepted Answer

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

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

div:has(+div.specialClass)

2 回答 2