CSS中的正向先行断言

Question

11

我知道在Perl正则表达式中，有一种叫做正向先行断言的概念，例如q(?=u)会匹配跟在q后面的u，但是不会把u包含在匹配结果里。我想在CSS中找到类似的东西：我想匹配一个

元素，后面跟着一个特定类名为div.specialClass的兄弟元素。

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

我已经尝试过使用+，但它匹配的是div.specialClass，而我想要匹配前面的div。

- dr jerry

所以你想匹配像这样的东西：<div><div class="specialClass">？ - user672118

@dusnmoreb 抱歉，结构应该是：<div>..</div><div class="specialClass">..</div> 将更新问题。 - dr jerry

2个回答

2

关注一下CSS4选择器:has()，几乎所有浏览器都支持它*Firefox伤心的声音*。

div:has(+div.specialClass)

感谢 @porg 的更新！

- Jay Wick

2

更新：CSS的:has()现在得到了更广泛的支持！是的，它在概念上等同于正则表达式的向前查找。它会选择某个元素，如果其后面的特定元素（们）满足特定条件，但不选中查找部分。 - porg

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sampson · Accepted Answer

目前你还不能声明选择器的哪一部分是主题。在 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 元素的内容。