如何根据子元素设置父元素的样式

Question

假设我们的 html 结构如下所示：

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

现在，在某些按钮操作上，我将activeclassName 添加到子级的 div 中。

我的问题是：

如果子元素的 div 具有活动的 className，如何仅设置父元素的样式

// CSS 伪代码 //

if(child.has.className('active')
.parent{
background: red;
}

Answer 1

您可以使用:has()伪类选择器，尽管这只在较新的浏览器中受支持。否则你可能需要使用 JS。

.parent {
  background: #ccc;
}

.parent:has(.active) {
  background: steelblue;
  color: #eee;
}

/* Ignore below, for stylistic purposes only */
.parent {
  margin: 1rem;
  padding: 1rem;
  border-radius: .5rem;
  font-family: Arial, sans-serif;
}

<div class="parent">
  <div class="child">Child</div>
</div>

<div class="parent">
  <div class="child active">Child (active)</div>
</div>

对于基于 JS 的解决方案有两种方法：

• 推荐：在添加类的代码中active，您还可以在父级上切换一个类，has-active-child并相应地设置它的样式
• 不推荐：使用MutationObserver API监听子节点上的类更改并设置父节点的样式