Question

我创建了一个使用两个类的间距元素：

.spacer-mobile-M = spacing height on mobile devices
.spacer-desktop-0 = spacing height on desktop devices (only active @media (min-width: 992px))

.spacer-blank {
    display: block;
    border: 1px solid #000;
}

.spacer-mobile-M {
    height: 20px;
}

@media (min-width: 992px) {
    .spacer-desktop-0 {
        height: 0px;
    }
}

<div class="spacer-blank spacer-mobile-M spacer-desktop-0" aria-hidden="true"></div>

在1200像素宽的屏幕上，预期的行为将是移动分隔符被桌面样式覆盖（由于媒体查询的缘故而具有更高的特异性，并且稍后在代码中进行了定义）。

但是，现在，桌面分隔符正在被移动样式覆盖。

我只能使用高度比移动值低的垫片来体验这种行为。

是否有规则可以覆盖height: 0或比常规高度低的类（无需媒体查询）？搜索特异性时，我在Google中找不到任何内容。

感谢您的简短提示。

Answer 1

我认为问题可能是对同一元素使用两个不同的CSS类。如果您使用媒体查询，为什么不使用同一类？例如：

.spacer {
  display: block;
  height: 20px;
}

@media (min-width: 992px) {

  .spacer {
    height: 0;
  }
}

<div class="spacer" aria-hidden="true"></div>

我不知道其余的代码，但是如果您要在桌面大小上隐藏隐藏分隔符，也可以使用：

@media (min-width: 992px) {

  .spacer {
    display: none;
  }
}

为什么我的样式表被具有较低特异性的样式表忽略？

1 个答案: