responsive-design - 如何覆盖 Foundation 的显示 :inherit property for visibility classes?

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元素。由于基金会使用 !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踢球(请记住，除非屏幕很小，否则元素不会显示)。

希望对您有所帮助。