仅用CSS/SCSS/Sass检测父元素新增子元素并修改其样式？

很遗憾的是，纯CSS/SCSS没办法直接“检测”父元素里有新子元素被动态创建这个动作。CSS是声明式的样式语言，它只能基于当前已有的DOM结构匹配选择器、应用样式，没有能力监听DOM的变化事件（比如子元素被添加/移除这类动态操作）。

不过，我们可以换个思路：基于当前DOM的状态（比如子元素的数量、是否存在特定子元素）来实现类似效果——也就是当父元素满足某个子元素条件时，自动应用对应的样式。现代浏览器支持的:has()选择器就能帮我们做到这一点。

结合你的代码需求分析 #

从你贴的代码来看，你想要的逻辑大概是：

• 非hover状态下，.toast-bottom-right只显示第一个.toast-error，隐藏其他的，还带有折叠动画
• hover时展开父元素，显示所有子元素

我们可以用:has()让父元素根据子元素的数量来调整样式，比如当父元素里有多个.toast-error时，触发折叠/展开的逻辑。

优化后的代码示例 #

.toast-bottom-right {
  max-height: 40%;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none; /* 替换旧的-moz私有写法，更标准 */
  
  /* 非hover且存在至少第二个toast-error时，执行折叠动画 */
  &:not(:hover):has(.toast-error:nth-child(n+2)) {
    animation: collapse 2s 1s forwards;
  }
  
  /* hover状态：展开并显示所有子元素 */
  &:hover {
    max-height: 40%; /* 你可以根据需求改成100%或者其他值 */
    & > .toast-error:not(:first-child) {
      display: block;
    }
  }
  
  /* 非hover状态：隐藏除第一个外的toast-error */
  &:not(:hover) > .toast-error:not(:first-child) {
    display: none;
  }
  
  /* 隐藏滚动条 */
  &::-webkit-scrollbar {
    display: none;
  }
}

@keyframes collapse {
  to {
    max-height: 10%; /* 自定义折叠后的高度 */
  }
}

注意事项 #

1. :has()的兼容性：目前Chrome、Edge、Safari已经原生支持:has()，但Firefox需要在浏览器设置的about:config里开启layout.css.has-selector.enabled选项才能用。如果需要兼容旧版浏览器，这个方案可能不太适用。
2. 降级方案：要是必须兼容不支持:has()的环境，那就只能借助JavaScript的MutationObserver来监听DOM变化——当检测到父元素新增子元素时，给父元素加一个自定义类，然后用CSS基于这个类来修改样式。不过这就不属于纯CSS的范畴了。

内容的提问来源于stack exchange，提问作者redlum