css属性选择器与动态添加的类名不匹配

我正在使用react的CSS动画插件，当我使用它们提供的类名时，一切都很好

.quote-enter {
  opacity: 0.01;
  transition: opacity .25s ease-in;
}

.quote-enter.quote-enter-active {
  opacity: 1;
}

.quote-leave {
  opacity: 1;
  transition: opacity .25s ease-in;
}

.quote-leave.quote-leave-active {
  opacity: 0.01;
}

但当我尝试将其转换为属性选择器方法来捕捉每个应该设置动画的组件实例时，它不起作用，没有选择器匹配

[class$='-enter'] {
  opacity: 0.01;
  transition: opacity .25s ease-in;
}

[class$='-enter'][class$='-enter-active'] {
  opacity: 1;
}

[class$='-leave'] {
  opacity: 1;
  transition: opacity .25s ease-in;
}

[class$='-leave'][class$='-leave-active'] {
  opacity: 0.01;
}

---

$=

操作符匹配整个属性的结尾，因此如果您要定位的类不是元素的最后一个（比如

class=“which enter other class”

），则选择器将不匹配

您可以尝试以下方法：

[class$='-enter'], [class*='-enter '] {
  opacity: 0.01;
  transition: opacity .25s ease-in;
}
[class$='-leave'], [class*='-leave '] {
  opacity: 1;
  transition: opacity .25s ease-in;
}

当组合两个类（2*2=4个选择器）时，它会变得更复杂，因此您最好只使用

*=

操作符：

[class*='-enter'] {
  opacity: 0.01;
  transition: opacity .25s ease-in;
}

[class*='-enter'][class*='-enter-active'] {
  opacity: 1;
}

[class*='-leave'] {
  opacity: 1;
  transition: opacity .25s ease-in;
}

[class*='-leave'][class*='-leave-active'] {
  opacity: 0.01;
}

---

只要您没有任何其他以这些后缀结尾的课程，这将起作用。

谢谢您的回答。从理论上讲，[class*='-离开][class*='-离开活动状态]]不是双重匹配吗？也许我可以用通配符省略第一个选择器，然后强制css排序-如中所示，*-enter将被-enter active覆盖，只要它遵循。选中它，它就可以工作。也适用于我的理论-离开之前-离开活动-谢谢！先生，关键是你。是的，你是对的，

[class*='-离开][class*='-离开活动]

是多余的，可以单独用

[class*='-离开活动]

代替。