css - css 中的积极前瞻

Question

我知道在 Perl 正则表达式中正先行的概念，即 q(?=u) 匹配一个 q 后跟一个 u，而不使 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.specialClass 之前的所有 div 元素的引用。

演示:http://jsfiddle.net/jonathansampson/HLfCr/
来源:http://dev.w3.org/csswg/selectors4/#subject