当父母包含特定孩子时如何设置父母的样式？

Question

我有一些看起来像这样的HTML：

<div id="parent">
  <div id="child"></div>
</div>

我想将默认背景颜色应用于#parent，除非它包含#child。

所以CSS应该最终看起来像这样：

#parent {
  background: red
}
#parent:contains(#child) {
  background: none
}

但是，我不能让:contains伪选择器以这种方式工作。有没有办法实现这个目标？

Answer 1

:contains() was only intended to match elements containing certain text，而不是包含某些其他元素的元素。正是由于与文本匹配元素相关的复杂性，几乎没有浏览器实现，导致:contains() being dropped from the spec。

由于there is no parent selector in CSS和:has()（确实会查看元素）仅存在于jQuery中，因此您无法使用CSS yet实现此目标。< / p>

对于记录jQuery implements :contains() as well，但它是根据旧规范执行的，因此它使用名称:has()代替。

Answer 2

使用jquery

if($("#child").length>0) $("#parent").css("backgroundColor","#fff");

纯粹的CSS不可能。