css - 基于 :not() css 选择器更改类属性

Question

我对 css 类有一个问题。我有.navigation__container并且.controlBar__container我只想在我的播放器有特定的类时显示。

当用户处于活动状态时，我需要同时显示两者。因此，我从 Video.js 播放器中提取了所需的类，看起来像这样 .vjs-user-inactive .vjs-user-active .vjs-active .vjs-paused 我的目标是在我的播放器处于活动状态时隐藏我的容器类。我试图用css做到这一点:not()

.vjs-user-inactive:not(.vjs-paused) {
  .playerNavigation__container,
  .playerControlBar__container {
    display: none;
    opacity: 0;
    transition: opacity 0.5s;
  }
}

但这并没有改变我想要的不透明度和显示。有什么建议么？这是我的容器类

.playerNavigation__container {
  position: absolute;
  top: 1.6rem;
  left: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  z-index: 999;
}

.playerControlBar__container {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translate(-50%, 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  z-index: 999;
}

标签： csssasscss-selectors