在CSS中积极向前看

时间:2012-06-02 19:28:38

标签: css regex

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

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

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

2 个答案:

答案 0 :(得分:10)

您还无法声明选择器的哪个部分是主题。主题始终是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元素。

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

答案 1 :(得分:0)

现在不是很有帮助,但是

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

目前有no browser compatibility at all

div:has(+div.specialClass)