css - 什么时候应该在其他类选择器定义中定义 CSS 类选择器？

Question

编辑 1 根据建议，我尝试了这个:

.lower-container {
    justify-content: center;
    position: absolute;
    width: 92vw;
//    height: 46vh; <--- no height defined

/* nested for adding classes to change position and height of lower-container */
    .lower-container.lower-full {
      height: 92vh;
      top: 0;
    }

    .lower-container.lower-mid {
      height: 46vh;
      top: 46vh;
    }

    .lower-container.lower-closed {
      height: 1vh;
      top: 91vh;
    }
}

在元素面板中我看到:

但是在样式面板中我有:

因此，虽然我正在应用附加类，但高度没有设置，附加类也没有显示在样式中。

---

原始问题 我正在像这样在其他类中定义一些类:

.lower-container {
    height: 46vh;
    display: flex;
    justify-content: center;
    ...

    .lower-full {
        height: 92vh;
    }
}

然后当需要改变我正在做的高度时:

    lowerContainerElement.classList.add('lower-full')

但在控制台上，该元素在样式面板中没有 .lower-full 样式， 即使在元素面板中显示 class="{other classes} lower-full"

我做错了什么？

Answer 1

您不能仅使用原始 CSS 在另一个选择器中定义 CSS 选择器，您需要像 SASS 这样的预处理器。

使用 CSS，您可以指定元素何时只有 .lower-container 或两者都有的属性。这将等同于您尝试在原始代码中完成的工作。

.lower-container {
   height: 46vh;
   display: flex;
   justify-content: center;
   ...
}

.lower-container.lower-full {
    height: 92vh;
}

如果您已经在使用 SCSS 文件，那么您使用的语法不正确

.lower-container {
    height: 46vh;
    display: flex;
    justify-content: center;
    ...

    &.lower-full {
        height: 92vh;
   }
}

根据最新编辑进行编辑:代码应如下所示:

.lower-container {
    justify-content: center;
    position: absolute;
    width: 92vw;
//    height: 46vh; <--- no height defined

/* nested for adding classes to change position and height of lower-container */
    &.lower-full {
      height: 92vh;
      top: 0;
    }

    &.lower-mid {
      height: 46vh;
      top: 46vh;
    }

    &.lower-closed {
      height: 1vh;
      top: 91vh;
    }
}