Question

我使用旋转木马滑块超过两次，其.item高度为100%。我必须在特定高度上调整主滑块，因此我在.custom-slider标记中添加了一个类header，并将样式添加到!important标记，因为已经有100%个高度。

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

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

我正在尝试在1024次洗脱时使用样式，但它不起作用。

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

这个被接受的answer得到了很好的解释，但我没有解决我的问题，可以指导我这个问题。我想要感激。

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

当您定义媒体查询时，它将捕获相关的查询。如果你从下往上，只有相关的！重要的会抓住。因为他们有相同的＆＃34;级联果汁＆＃34;获胜者将是：具有适当媒体追踪和最后一个媒体追踪的那个，所以结合它们将解决问题。

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添加父容器也是如此。

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

3 个答案: