已成功为元素添加show类但样式未生效问题求助

我已成功为元素添加show类，但该类的样式却未生效。

相关代码 #

JavaScript #

const obeserver = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add("show");
    } else {
      entry.target.classList.remove("show");
    }
  });
});
const hiddenElements = document.querySelectorAll(".hidden");
hiddenElements.forEach((el) => obeserver.observe(el));

CSS #

.show {
  opacity: 1;
  filter: blur(0);
  transform: translate(0);
}

.hidden {
  opacity: 0;
  transition: 1s ease all;
  filter: blur(5px);
  transform: translate(-100%);
}

问题根源是CSS优先级冲突：.hidden和.show属于同级优先级的类选择器，但.hidden的定义在.show之后，根据CSS"后定义覆盖前定义"的规则，.hidden的样式会压制.show的规则。

以下是三种可行修复方式：

• 提升.show选择器优先级（推荐）
  使用复合选择器.hidden.show，表示同时拥有两个类的元素，优先级高于单个类选择器，能精准覆盖.hidden的样式：

  .hidden.show {
    opacity: 1;
    filter: blur(0);
    transform: translate(0);
  }
  
  .hidden {
    opacity: 0;
    transition: 1s ease all;
    filter: blur(5px);
    transform: translate(-100%);
  }
  

• 调整CSS代码顺序
  将.show的定义移到.hidden之后，让后定义的.show规则覆盖.hidden：

  .hidden {
    opacity: 0;
    transition: 1s ease all;
    filter: blur(5px);
    transform: translate(-100%);
  }
  
  .show {
    opacity: 1;
    filter: blur(0);
    transform: translate(0);
  }
  

• 使用!important（不推荐，仅应急用）
  给.show的属性添加!important强制覆盖，但会破坏CSS优先级体系，可能引发后续样式问题：

  .show {
    opacity: 1 !important;
    filter: blur(0) !important;
    transform: translate(0) !important;
  }
  
  .hidden {
    opacity: 0;
    transition: 1s ease all;
    filter: blur(5px);
    transform: translate(-100%);
  }
  

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