regex css中的正向前看

yhuiod9q 于 2023-06-25 发布在其他

关注(0)|答案(2)|浏览(107)

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

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

我已经使用了+，但它与div.specialClass匹配，而我想要前面的div。

2条答案

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

// 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

关注CSS 4选择器**:has()，它几乎支持所有浏览器悲伤的Firefox噪音**

div:has(+div.specialClass)

谢谢@Porg的更新！