css - 当父级包含特定子级时如何设置父级样式？

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()仅用于匹配包含某些 text的元素，而不是包含某些其他元素的元素。正是由于与通过文本匹配元素相关的复杂性，几乎没有浏览器实现，导致:contains()从规范中删除。

由于CSS 中没有父选择器，并且:has()（它确实查看元素）仅存在于jQuery中，因此您将无法使用 CSS 实现这一点。

作为记录，jQuery 也实现:contains()了，但它是根据旧规范执行的，因此它使用:has()元素的名称来代替。

Answer 2

用 jquery

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

纯css是不可能的。