CSS两个模块active状态相互干扰，如何为单一类设置active状态？

你遇到的问题是两段CSS代码共用了.active类，导致样式冲突：滚动渐入元素触发.active状态时，会意外显示折叠按钮的减号符号。这是因为全局的.active规则会同时作用于所有带有该类的元素。

修改方案：限定Active状态的作用范围 #

通过将.active与各自的目标类组合，让每个.active规则仅作用于对应模块的元素，修改后的代码如下：

/* FADE-IN ITEMS ON SCROLL */           
.fade-in {
  opacity: 0;
  transform: translateY(40%);
  transition: all 2s ease-out;
}

/* 仅作用于滚动渐入元素的active状态 */
.fade-in.active {
  opacity: 1; /* 修正原代码错误：opacity取值范围为0-1，4是无效值 */
  transform: translateY(0);
}

/* COLLAPSIBLE BUTTONS */ 
.collapsible:after {
  content: '\002B';  /* 加号 */
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

/* 仅作用于折叠按钮的active状态 */
.collapsible.active:after {
  content: "\2212"; /* 减号 */
}

原理说明 #

• 原代码中的.active是全局类，所有添加该类的元素都会继承两个模块的样式规则，导致冲突。
• 修改后，.fade-in.active仅对同时拥有.fade-in和.active类的元素生效，.collapsible.active:after仅对同时拥有.collapsible和.active类的元素的伪元素生效，实现了样式的隔离。

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