在移动优先设计中使用媒体查询删除类属性？

Question

我有选项卡元素,display: inline或者none取决于它们是否被选中.例如:

<div class="tab" style="display:inline;"></div>
<div class="tab" style="display:none;"></div>

然后我的样式表中的类会覆盖display属性,以便所有选项卡都显示在移动设备中:

.tab {
display: block !important;
}

我的问题是我需要防止这种情况应用于大于600px的屏幕,但我不能使用max-width查询.因此,我需要display: block !important使用最小宽度的媒体查询覆盖,而不应用任何其他特定样式.例如:

@media screen and (min-width: 600px){
.tab  {
display: /*don't do anything*/ !important; 
}
}

Answer 1

如果按类名标记选定的选项卡class='selected',可以尝试这种方式:

HTML:

<div class="tab selected">1</div>
<div class="tab">2</div>
<div class="tab">3</div>

CSS:

.tab {
    display: block;
}

@media screen and (min-width: 600px){
    .tab  {
        display: none;
    }
    .tab.selected {
        display: inline-block;
    }
}

见演示