如何覆盖Foundation的显示：继承可见性类的属性？

Question

我正在移动第一个项目中使用Foundation，其中根据浏览器大小隐藏了许多元素，并且在使用Foundation的可见性类（例如.show-for-small-only时遇到基础应用时遇到了一些麻烦

display: inherit !important;

使用这些可见性类的任何元素。 （例如，见第5808行）......

.show-for-small-only {
    display:inherit !important;
}

这引起了我的问题。假设有一个我想要的元素.show-for-small-only：

<div class="someElem show-for-small-only">
    <!-- Content -->
</div>

然而，我希望这个元素在显示时被格式化为display:inline-block元素。由于Foundation使用!important，div被迫假设它的默认显示状态为block。

是否有任何解决方法，而不是将我的样式声明为!important？ （我不想这样做）......

Answer 1

我同意，使用!important总是感觉很糟糕。

CSS中的优先级被赋予树下最远的元素，因此要覆盖Foundation !important属性，只需将一个元素定位在树的下方，如下所示：

<div class="show-for-small-only">
 <div class="someElm">

  <!-- your content here -->

 </div>
</div>

使用以下CSS

.someElm {
  display: inline-block;
}

这是一个Plunker用于踢（只记得项目不会出现，除非屏幕很小）。

我希望这会有所帮助。

Answer 2

要覆盖inportant，只需在第一次声明

后再次声明它

.show-for-small-only {
  display:inherit !important;
}
.show-for-small-only {
  display: inline-block!important;
}

<div class="someElem show-for-small-only">
  Content 
</div>