Question

如果我只想在有div兄弟的情况下设置p元素的样式，我可以编写以下CSS规则：

p ~ div

当不是匹配的兄弟元素时，是否存在用于样式化元素的CSS规则？

例如：

p !~ div

<section>
   <p></p>
   <div></div>
   <div></div>
</section>
<section>
   <div></div> <!-- Style this one -->
   <div></div> <!-- Style this one -->
</section>

Answer 1

如果:not()允许组合者，您只需div:not(p ~ div)即可。但事实并非如此，因此您无法以这种方式使用:not()。

您需要的选择器取决于您的结构。在您的情况下，如果p没有导致第一个div成为您section的第一个孩子，则可以使用div:first-child确保您选择div div:first-child, div:first-child ~ div 1}}当且仅当满足该条件时：

{{1}}

如果您的结构不允许构建这样的选择器，那么您将不得不依赖于Danield建议的重写规则。

Answer 2

如何以相反的方式做到这一点：

当没有<p>元素时，根据您希望的方式为div设置所有的样式。

然后在有<p>元素时覆盖该样式。

section div
{
    color: green;
}

section p ~ div
{
    color: black;
}

<强> FIDDLE

Answer 3

只需将id / class赋予div并编写相应的CSS简单

即可

没有匹配的一般兄弟的CSS规则

3 个答案: