带有类名的 CSS 媒体查询

Question

以下 html 有一个图像，其大小根据我的@media 查询而有所不同。 它可以在没有任何类名的情况下正常工作，但是一旦我添加了类名（使用Angular ngClass directive），媒体规则就不会再触发了。

1. 工作正常 - 应用媒体规则，图片为 105x105，高度 >= 999 像素。

div {
    width: 85px;
    height: 85px;
    align-self: center;
    
    @media screen and (min-height: 999px) {
      width: 105px;
      height: 105px;
    }
}

     <div>
      <img
        *ngIf="svgImageData"
        src="{{ svgImageData }}"
        width="{{ width }}"
        height="{{ height }}"
      />
    </div>

当我检查元素时，我可以看到，min-height: 999px 已应用：

使用类名，媒体规则不触发 - 即我评论了 105px 的高度和宽度，并将其移至媒体查询下方的类规则中：

div {
    width: 85px;
    height: 85px;
    align-self: center;
    
    @media screen and (min-height: 999px) {
      //width: 105px;
      //height: 105px;
      .gcl-no-scrollbar {
        width: 105px !important;
        height: 105px !important;
      }      
      .gcl-scrollbar{
        width: 95px;
        height: 95px;
      }
    }
}

<div [ngClass]="gclScrollbarIsVisible ? 'gcl-scrollbar' : 'gcl-no-scrollbar'" >
      <img
        *ngIf="svgImageData"
        src="{{ svgImageData }}"
        width="{{ width }}"
        height="{{ height }}"
      />
    </div>

在这里我看到gcl-no-scrollbar 应用于html 元素，但不是媒体查询规则.gcl-scrollbar { ... }

Answer 1

我的问题是级联问题。问题只是我忘了添加&.：

div {
width: 85px; 
height: 85px;
&.gcl-scrollbar{
  width: 95px;
  height: 95px;
}
align-self: center;

}