如何用纯CSS实现仅最内层up-loading-spinner显示加载动画并兼容Firefox？

解决嵌套重复显示问题 #

你之前的选择器会匹配所有包含.up-loading的.up-loading-spinner，导致多层嵌套时多个动画同时显示。要只让最内层的spinner触发动画，可以给选择器加上排除条件，确保当前spinner的子树里没有其他spinner容器：

/* 默认隐藏加载动画容器 */
.up-loading-spinner {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  /* 可添加固定定位、居中对齐等布局样式 */
}

/* 仅匹配最内层的、包含.up-loading的spinner */
.up-loading-spinner:has(.up-loading):not(:has(.up-loading-spinner)) {
  opacity: 1;
  visibility: visible;
}

这个选择器的逻辑是：

• :has(.up-loading)：确保当前spinner的子树里存在加载状态的元素
• :not(:has(.up-loading-spinner))：排除掉子树中还包含其他spinner的容器，只保留最内层的目标容器

解决Firefox兼容问题 #

目前Firefox默认不支持:has选择器，想要让上述代码在Firefox中生效，需要用户手动在浏览器的about:config页面中开启layout.css.has-selector.enabled选项（将其设为true）。

如果必须实现无额外配置的Firefox纯CSS兼容，目前没有完美的原生方案（因为CSS没有通用的父元素选择器）。若页面结构允许，可尝试调整Unpoly的行为（比如让加载类直接绑定到目标spinner上），但这超出了纯CSS的实现范围。

内容的提问来源于stack exchange，提问作者mabe.berlin