选择元素后面没有其他元素

Question

我需要能够选择一个HTML p标签,只要它没有跟着另一个具有特定类的div元素.例如,我需要选择此P.

<div id="myContainer">
    <p>...</p>
    <div>...</div>
</div>

但不是这个,因为它后跟一个div = class ="red"的div.

<div id="myContainer">
    <p>...</p>
    <div class="red">...</div>
</div>

这是我正在尝试的:

#myContainer > p ~ div:not(.step) 

Answer 1

您不能使用CSS来定位以前的元素,但根据您的HTML结构,您可以使用直接兄弟选择器.

CSS:

.myContainer p + div:not(.red)   {
   border: 1px solid #000;
}

HTML:

<div class="myContainer">
    <p>...</p>
    <div>...</div>
</div>
<div class="myContainer">
    <p>...</p>
    <div class="red">...</div>
</div>

演示 http://jsfiddle.net/92VVZ/

Answer 2

你是这个意思吗？那么你就快到了。

演示版

/* will select p not directly followed by div.red */
#myContainer > p + div:not(.red)