Как переопределить отображение Foundation: наследовать свойство для классов видимости?

Question

Я использую 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

Чтобы перезаписать 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>

Answer 2

I согласитесь, используя !important всегда чувствует себя грубо.

Внеочередные в CSS дается элемент дальше вниз по дереву так, чтобы переопределить свойство Foundation !important, только целевой элемент далее вниз по дереву, например, так:

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

    <!-- your content here --> 

</div> 
</div> 

Со следующим CSS

.someElm { 
    display: inline-block; 
} 

Вот Plunker для пинков (просто помните, что предметы не появятся, если экран не маленький).

Надеюсь, это поможет.