没有匹配的一般同级的 CSS 规则答案

【问题标题】：CSS rule for no matching general sibling没有匹配的一般同级的 CSS 规则
【发布时间】：2014-03-26 22:24:04
【问题描述】：

如果我只想在有 p 同级元素时设置 div 元素的样式，我可以编写以下 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>

【问题讨论】：

正如您可能已经猜到的那样，不存在这样的组合子，但在纸面上听起来确实很有趣。不确定它在实践中如何工作。选择器 4 确实通过允许 :not() 中的组合器实现了这一点，正如我在回答中提到的那样，但也存在快速与完整配置文件的问题，使其在 CSS 中无法使用。

标签： css css-selectors siblings

【解决方案1】：

如果:not() 允许组合子，您可以简单地使用div:not(p ~ div)。但事实并非如此，因此您将无法以这种方式使用:not()。

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

div:first-child, div:first-child ~ div

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

【讨论】：

谢谢，您的检测div:first-child 的解决方案将适用于我的情况，因为p 是section 中唯一存在的其他元素，并且如果它始终是第一个元素存在。但是，未来的开发可能会违反此规则，因此遗憾的是无法合并:not()，但至少可以避免使用javascript！

【解决方案2】：

反之如何：

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

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

section div
{
    color: green;
}

section p ~ div
{
    color: black;
}

FIDDLE

【讨论】：

+1 谢谢，我考虑过这个，但我不想让非 CSS3 浏览器为每个元素显示 green。
@Curt: ~ 得到了非常好的支持 - IE7 这样做的原因是您的布局中可能不会出现的模糊错误。

【解决方案3】：

只要给 id/class 给 div 并简单地写出它对应的 CSS

【讨论】：