如何在不使用 !important 的情况下覆盖 css 类以进行响应式设计答案

【问题标题】：How to override css class for responsive design without using !important如何在不使用 !important 的情况下覆盖 css 类以进行响应式设计
【发布时间】：2020-10-15 15:52:45
【问题描述】：

我有一个分配给 span 的类。对于桌面版本，此跨度具有顶部：-25px 和左侧：-5px。对于移动版本，我需要将相同跨度的相同类更改为值顶部：-10px 和左侧：-3px。

如何在不使用 !important 的情况下实现这一点？下面是代码：

  .display {
  top: -25px;
  /* Need to change the values for mobile phones. */
  left: -5px;
}

@media (max-width:767px) {
  .display {
    top: -10px;
    /* This style is not applied and overruled in browser */
    left: -3px;
    /* This style is not applied and overruled in browser */
  }

<span id="lbTest" class="display">text</span>

<style>

</style>

【问题讨论】：

尝试在媒体查询中使用span.display。
这行得通！谢谢你。只是好奇，在媒体查询中添加 span.display 有何不同？
根据您提供的内容，我不明白为什么它不会覆盖您的样式。见example。应该在上面显示的order 中指定 css（如果两个规则具有相同的权重，则后者指定获胜）。
@user2294434 它只是更清楚地指定了元素。元素指定的越多，它在样式表中的优先级就越高。我就是这么理解的。但它不会覆盖!important。 @CraftedPod 也得到了一点，编写 css 的顺序会有所不同。 :)

标签： html css responsive-design responsive

【解决方案1】：

尝试在最小宽度为 768px 的媒体查询中插入主 css 并添加媒体类型（屏幕）

<span id="lbTest" class="display">text</span>

<style>
@media screen and (min-width:768px) {
.display {
top: -25px; 
left: -5px;
}

@media screen and (max-width:767px) {
.display {
top: -10px; 
left: -3px; 
}

}
</style>

【讨论】：