是否有可能从特定分辨率的元素中删除 ！重要属性

Question

>我使用轮播滑块两次以上，其.item高度为 100% .我必须在特定高度上调整主滑块，所以我在标签中添加了一个类.custom-slider header将样式与!important标签放在一起，因为已经有100%高度.

.custom-slider {
    height: 645px !important;
}

它经过调整，工作正常。现在我必须调整不同的分辨率，所以我必须将高度645px降低到496px，但由于!important属性，新添加的高度不起作用。

我正在尝试遵循 1024 分辨率的风格，但它不起作用。

.custom-slider {
    height: 496px !important;
} 

这个公认的答案得到了很好的解释，但我没有解决我的问题，任何人都可以指导我。我想欣赏。

Answer 1

将样式更改为max-height并删除important!

.custom-slider {
    max-height: 645px;
}

您还可以通过添加标签或父 ID/类来使选择器更具体。这将赋予样式更高的优先级。

body div.custom-slider {
    max-height: 645px;
}

Answer 2

如果您尝试在相同的分辨率下执行此操作（不使用媒体查询），您应该能够添加第二个类并为其定义高度 - 它应该覆盖第一个。例如：

<div class="custom-slider secondary-height"></div>
.custom-slider.secondary-height {
  height: 496px !important;
}

Answer 3

请检查这个：http://codepen.io/anon/pen/LGmrwZ

定义媒体查询时，它将触发相关查询。如果你自下而上，只有相关的重要才会抓住。由于它们具有相同的"级联果汁"，因此获胜者将是：具有适当媒体跟踪的那个和最后一个，因此将它们结合起来将解决问题。

SCSS 示例

  .custom-slider{ 
  width:100px;
  border:1px solid red;
   @media (min-width:700px) {
    height: 20px !important;
       border:1px solid green;
  }
  @media (min-width:900px) {
    height: 80px !important;
    border:1px solid blue;
  }
} 

顺便说一下，如果你的CSS是在滑块的CSS之后加载的，你不需要！important。

如果您将父容器添加到 CSS 中也是如此。