css - 选择没有跟随另一个的元素

Question

我需要能够选择一个 HTML p 标签，前提是它后面没有跟有特定类的另一个 div 元素。例如，我需要选择这个 P

<div id="myContainer">
    <p>...</p>
    <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/